在动作angularjs之前触发模型更新

Question

这里是 angularJS 的新手。我最初是为自己做一个简单的概念验证，但后来卡在了我认为不会卡住的地方。

基本上，我有一个目标清单。它们的布局使每个对应于模型上complete 属性绑定的复选框。如果用户勾选了其中一个目标，我想通过迭代目标并找到已完成（勾选）的目标来更新总进度。

每个复选框都会触发一个事件来执行此操作：

<ul>
  <li ng-repeat="objective in objectives">
    <input type="checkbox" ng-model="objective.complete" ng-click="updateProgress()">
    {{ objective.task }}
  </li>
</ul>

我遇到的问题是该操作是在模型更新之前执行的。我怀疑这与摘要周期有关，但由于我是 Angular 新手，我无法准确指出它是如何相关的。

有没有办法轻松完成我想做的事情？我觉得好像这不是一件复杂的事情，但我被困住了。我有一些关于什么会起作用的想法，包括观察目标数组或检查用户界面（这不是很好的设计），但还没有运气。

这是简化的控制器代码：

var app = angular.module('checksApp', []);

app.controller('ObjectivesController', ['$scope',
  function ($scope) {
    $scope.objectives = [];
    $scope.objective = { complete: false };
    $scope.progress = 0;

    $scope.addObjective = function(objective) {
      $scope.objectives.push(objective);
      $scope.objective = { complete: false };
    };

    $scope.updateProgress = function() {
      if (!$scope.objectives.length) return;

      var completed = 0;
      angular.forEach($scope.objectives, function(objective) {
        if (objective.complete) {
          completed++;
        }
      });
      $scope.progress = completed * 100 / $scope.objectives.length;
    };

}]);

Answer 1

有几种方法可以做到这一点。 Sunil 建议的 ng-change：

  <li ng-repeat="objective in objectives">
    <input type="checkbox" ng-change="updateProgress()" ng-model="objective.complete"  >
    {{ objective.task }} 
  </li>

或添加对目标的深入观察：

$scope.$watch('objectives', function(newVal) {
     $scope.updateProgress();
}, true);

我认为使用 ng-change 更容易，也更便宜。