如何用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>