javascript - 如何使用 ng-change 观察选择的变化？

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

只需在 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>