Question

以下是我的代码。通过单击全选按钮更改单个复选框时，不会触发单个复选框的ng-change，但单独选中时会触发它。单击全选按钮时，我需要触发itemChecked方法。

以下是同一

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

它在以下代码中完美运行，请查看代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您需要的是watchCollection方法。仅当值从HTML更改时，ngChange才有效。从控制器更改值时不会触发它。

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') });
    }
   /*********************************************************/      

]);

或者如果您只想在单击 selectAll 按钮时调用itemChecked方法，则只需在itemChecked方法内调用toggleSelection即可。

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

Angular ng-change不适用于复选框

HTML

的JavaScript

2 个答案: