监视数组的子值

Watching subvalues of array

本文关键字：数组 监视      更新时间：2023-09-26

我有一个包含项目的动态array，可能如下所示：

$scope.items = [
    {id: 1, name: 'Ford', checked: false},
    {id: 2, name: 'Mercedes', checked: true},
    {id: 3, name: 'BMW', checked: false}
];

我想在更改checked值时做出反应，并知道它在哪个项目上更改了。

我怎样才能做到这一点？

您可以将ng-change事件注册到绑定的复选框。如果您确实想添加手表，则可以使用深度监视选项。 $scope.$watch('items', fn, true) .但是，除非绝对需要，否则我不会使用观察程序。

例：-

<label ng-repeat="item in items track by item.id">
<input type="checkbox" ng-model="item.checked" ng-change="carSelected(item)" />{{item.name}}</label>


angular.module('app', []).controller('ctrl', function($scope) {
  $scope.items = [{
    id: 1,
    name: 'Ford',
    checked: false
  }, {
    id: 2,
    name: 'Mercedes',
    checked: true
  }, {
    id: 3,
    name: 'BMW',
    checked: false
  }];
  $scope.carSelected = function(item) {
    //Do something with the selected
    console.log(item);
  }
  
  $scope.$watch('items', function(){
    console.log("Item updated");
  }, true)
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <label ng-repeat="item in items track by item.id">
    <input type="checkbox" ng-model="item.checked" ng-change="carSelected(item)" />{{item.name}}</label>
  <p>
    {{items}}
</div>

相关文章：