동작 이전에 모델 업데이트 트리거링 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> 

오전 데 문제는 모델이 업데이트되기 전에 작업이 수행되고 있다는 점이다. 나는 이것이 다이제스트주기와 관련이 있다고 생각하지만, 새로운 각도에서부터 어떻게 관련되어 있는지 정확하게 지적 할 수 없었다.

내가 쉽게하려고하는 것을 달성 할 수있는 방법이 있습니까? 나는이 일이 복잡한 일이 아닌 것처럼 느낀다. 그러나 나는 붙어있다. 나는 목표 배열을 보거나 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

이 작업을 수행 할 수있는 방법의 커플. 선일로 NG 변화 제안 :

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

또는 목표에 깊은 시계를 추가 : 나는 NG 변화를 사용하여 생각

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

하기 쉽고 저렴합니다.