Angular ng-change不適用於復選框

Question

這是下面的代碼。 單擊“全選”按鈕更改單個復選框的ng-change不會觸發，但是單獨選擇時會觸發。 單擊全選按鈕時，需要觸發itemChecked方法。

這是相同的Codepen鏈接

HTML

<div ng-app="Test">
  <div ng-controller="TestController">
    <form>
      <div ng-repeat="item in list track by $index">
        <input type="checkbox" ng-model="item" ng-change="itemChecked($index)">{{$index + 1}}
      </div>
    </form>
    <button ng-click="toggleSelection()">Select all</button>
  </div>
</div>

JavaScript的

var app = angular.module("Test", []);
app.controller("TestController", [
  "$scope",
  "$http",
  function($scope, $http) {
    $scope.list = [false, false, false, false, false];

    $scope.itemChecked = function(i) {
      console.log(i);
    };

    $scope.toggleSelection = function() {
      for (var i in $scope.list) {
        $scope.list[i] = true;
      }
    };
  }
]);

請讓我知道我需要更改或做錯了什么來解決此問題。

Answer 1

您在ng-model設置了錯誤的變量。 ng-model部分應為：

ng-model="list[$index]"

要收聽集合，您必須使用以下內容：

$scope.$watchCollection

在以下代碼中，它運行良好，請檢查代碼片段：

 var app = angular.module("Test", []); app.controller("TestController", [ "$scope", "$http", function($scope, $http) { $scope.list = [false, false, false, false, false]; $scope.itemChecked = function(i) { console.log(i); console.log($scope.list[i]); }; $scope.$watchCollection('list', function (oldValue, newValue) { //console.log(oldValue); //console.log(newValue); //console.log($scope.list); for(var i = 0; i < oldValue.length;i++){ if (oldValue[i]!==newValue[i]) { $scope.itemChecked(i); } } }); $scope.toggleSelection = function() { for (var i in $scope.list) { $scope.list[i] = true; } }; } ]); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="Test"> <div ng-controller="TestController"> <form> <div ng-repeat="item in list track by $index"> <input type="checkbox" ng-model="list[$index]" ng-change="itemChecked($index)">{{$index + 1}} </div> </form> <button ng-click="toggleSelection()">Select all</button> </div> </div> 

Answer 2

您需要的是watchCollection方法。 ngChange僅在從HTML更改值時才起作用。 從控制器更改值時不會觸發。

app.controller("TestController", [
  "$scope",
  "$http",
  function($scope, $http) {
    $scope.list = [false, false, false, false, false];

    $scope.itemChecked = function(i) {
      console.log(i);
    };

    $scope.toggleSelection = function() {
      for (var i in $scope.list) {
        $scope.list[i] = true;
      }
    };


    /*********************************************************/        
    $scope.$watchCollection('list', function (newVal, oldVal) {   
           console.log('collection changed') });
    }
   /*********************************************************/      

]);

或者，如果你只是想itemChecked每當點擊全選按鈕調用的方法，然后只需調用itemChecked內toggleSelection方法。

$scope.toggleSelection = function() {
      for (var i in $scope.list) {
        $scope.list[i] = true;
        $scope.itemChecked(i);
      }
    };