javascript - 仅当更改值的长度等于 x 时，如何在输入文本中使用事件 ng-change 指令？

Question

我是 Angular 的初学者，我尝试解决这个问题:我有一个 <input/>字段:

<input 
  ng-model="codebare" 
  ng-change="addSale(codebare)" 
  name="keyWord"
  type="text" 
  class="form-control" 
  placeholder="Product name or barcode value" 
  autofocus />

正如您所见，我想在输入值( ng-model="codebare" )发生变化时获取它。我的问题是，此代码仅在第一个字符填充字段时才起作用，并且当我使用条形码扫描仪时，我想获取完整值( 3876666667677777287 )而不是第一个字符( 3 ) 。有没有一种简单的方法可以做到这一点？我认为像 ng-change-options="length" 这样的指令但找不到它。以下是我的addSale()功能:

$scope.addSale = function(codebare) {
    alert(codebare);
    var item = $scope.codebare;
    alert(item);
    $scope.orderedItemCnt = 1;
    var foodItem = {
        orderedItemCnt: 1,
        totalPrice: item.price,
        itemId: item.id, 
        id: $scope.itemsCnt,
        item: item
    };
}

Answer 1

如果您使用条形码扫描仪，我会添加一个 debounce 的 ng-model-option，以便在整个代码有时间完全输入之前模型不会更新。

我在下面创建了一个示例，您可以尝试。

angular.module('optionsExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  
  var data = {
    1264274554897965: { id: "AGDFT144", price: 10.50 },
    3124142142123532: { id: "AGFHH156", price: 2.15 },
    6588969543172554: { id: "BNHKL102", price: 101.60 }
  };
    $scope.barcode = 6588969543172554;
  $scope.$watch("barcode", function(newValue, oldValue) {
    if (newValue)
      addSale(newValue);
  });
  
  function addSale(barcode) {
    var item = data[barcode];
    var foodItem = {
        orderedItemCnt: 1,
        totalPrice: item.price,
        itemId: item.id,
    };
    console.log(foodItem);
  }
      
  

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="optionsExample" ng-controller="ExampleController">
  <form name="itemForm">
    <label>Name:
      <input type="text" name="barcode"
             ng-model="barcode"
             ng-model-options="{ debounce: 500 }" />
    </label>
    <br />
  </form>
  <pre>user.name = <span ng-bind="barcode"></span></pre>
</div>