Question

这里是angularJS的新手。我原本是为自己做了一个简单的概念验证，但后来陷入困境，我认为自己不会陷入困境。

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

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

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

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

有没有办法轻松完成我想做的事情？我觉得好像这不是一件复杂的事情，但我被困住了。我有几个想法，包括观察目标阵列或检查ui（这不是很好的设计），但还没有运气。

以下是简化的控制器代码：

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建议的那样改变：

  <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更容易，也更便宜。

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

1 个答案: