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

只需在ng-model="json.qty"代码中使用select，然后从ng-selected代码中删除option即可。这样就可以了。： - ）

如果函数的返回值发生变化，Angular会自动执行一个函数（在这种情况下为getSum）。

见下面的工作：

＆＃13;

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,
  }]

});

＆＃13;

<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>

＆＃13;

如何通过ng-change观察选择的变化？

2 个答案: