阵列的看着子值 [英] Watching subvalues of array

问题描述

我有一个动态的阵列的项目，这可能是这样的：

  $ scope.items = [
    {ID：1，名称：'福特'，检查：假}，
    {ID：2，名称：'奔驰'，检查：真正}，
    {ID：3，名称：'宝马'，检查：假}
];
 

我要当一个检查反应值被改变，并且知道它是改变了哪个项目。

我怎样才能做到这一点？

解决方案

您可以注册一个 NG-变化事件绑定的复选框。如果你真的真的想添加一个手表，你可以使用深手表选项。 $范围。$腕表（'项目'，FN，真实）。不过我不会用一个守望者，除非它的的绝对需要的

例如： -

 ＆LT;标签NG重复=中的项项跟踪由item.id＆GT;
＆LT;输入类型=复选框NG模型=item.checkedNG变化=carSelected（项目）/>{{item.name}}</label>
 

\r

\r

angular.module（应用，[]）。控制器（CTRL ，功能（$范围）{\r
  $ scope.items = [{\r
    ID：1，\r
    名称：'福特'，\r
    检查：假的\r
  }，{\r
    ID：2，\r
    名称：'奔驰'，\r
    检查：真\r
  }，{\r
    ID：3，\r
    名称：'宝马'，\r
    检查：假的\r
  }];\r
\r
  $ scope.carSelected =功能（项目）{\r
    //使用所选择的东西\r
    的console.log（项目）;\r
  }\r
  \r
  $范围。$腕表（'项目'，函数（）{\r
    的console.log（项目更新）;\r
  }，真）\r
}）

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=CTRL＆GT;\r
  ＆LT;标签NG重复=中的项项跟踪由item.id＆GT;\r
    ＆LT;输入类型=复选框NG模型=item.checkedNG变化=carSelected（项目）/>{{item.name}}</label>\r
  ＆所述p为H.;\r
    {{项目}}\r
＆LT; / DIV＆GT;

\r

\r

\r

I have a dynamic array with items, which could look like this:

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

I want to react whenever a checked value is changed, and know which item it was changed on.

How can I achieve this?

解决方案

You could register an ng-change event to the check boxes bound. If you indeed really want to add a watch you can use the deep watch option. $scope.$watch('items', fn, true). However i will not to use a watcher unless it is absolutely required.

Example:-

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

这篇关于阵列的看着子值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！