如何用ng-change观看select的变化？

Question

知道更改所选值后如何更新总数吗？ http://jsfiddle.net/yx97x0xk/1

angular.module('app', ['QuickList']).controller('mainCtrl', function($scope) {
  $scope.getSum = function() {
    return $scope.myJson.map(function(x) {
      return x.price * x.qty
    }).reduce(function(a, b) {
      return a + b
    });
  }

  $scope.myJson = [{
    "id": "1",
    "name": "banana",
    "price": 12,
    "qty": 3,
  }, {
    "id": "2",
    "name": "watermelon",
    "price": 12.9,
    "qty": 4,
  }]

})

Answer 1

显然，它们并不相同。 一种仅在控制器中使用；另一种仅用于控制器。 另一个是对输入元素的指令。

但是，即使在它们的应用中，它们也有所不同。

当您使用$ watch时，将在每个摘要周期对观察到的表达式进行评估，如果有更改，则将调用处理程序。

使用ng-change时，更改仅限于用户对特定输入元素的操作。

使用ng-change时，响应于事件显式调用处理程序。

使用$ watch，更改可以来自任何地方：用户操作，控制器功能，服务-所有这些都将触发处理程序。

Answer 2

只需在您的select标签中使用ng-model="json.qty"并从option标签中删除ng-selected 。 这将达到目的。 :-)

如果函数的返回值发生更改，Angular将自动执行一个函数（在本例中为getSum ）。

看到它在下面工作：

 angular.module('app', []).controller('mainCtrl', function($scope) { $scope.getSum = function() { return $scope.myJson.map(function(x) { return x.price * x.qty }).reduce(function(a, b) { return a + b }); }; $scope.myJson = [{ "id": "1", "name": "banana", "price": 12, "qty": 3, }, { "id": "2", "name": "watermelon", "price": 12.9, "qty": 4, }] }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='app' ng-controller='mainCtrl'> <div ng-repeat="json in myJson"> <li>{{json.name}}</li> <select name="" id="" ng-model="json.qty"> <option ng-repeat="i in [1,2,3,4,5,6,7,8,9,10]">{{$index + 1}}</option> </select> </div> <h1>total:{{getSum()}}</h1> </div>