Fatal编程技术网
  • angularjs/
  • Angularjs 如何监视由ng repeat创建的模型上的更改？

Angularjs 如何监视由ng repeat创建的模型上的更改？

angularjs

Angularjs 如何监视由ng repeat创建的模型上的更改？,angularjs,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Scope,Angularjs Ng Repeat,举个例子。我不知道会事先创建多少fooCollection的成员。所以我不知道会有多少bar模型 但我知道它们将是角度模型，我知道它们将在哪里 如何在这些上执行$watch 我需要这样做，因为我需要在更改条形图模型时触发行为。仅查看fooCollection本身是不够的，当更改条时，$watch侦听器不会启动 相关html： <body ng-controller="testCtrl"> <div ng-repeat="(fooKey, foo) in fooCollect

举个例子。我不知道会事先创建多少
fooCollection
的成员。所以我不知道会有多少
bar
模型

但我知道它们将是角度模型，我知道它们将在哪里

如何在这些上执行
$watch

我需要这样做，因为我需要在更改
条形图
模型时触发行为。仅查看fooCollection本身是不够的，当更改
条时，
$watch
侦听器不会启动

相关html：


<body ng-controller="testCtrl">
  <div ng-repeat="(fooKey, foo) in fooCollection">
    Tell me your name: <input ng-model="foo.bar">
    <br />
    Hello, my name is {{ foo.bar }}
  </div>
  <button ng-click="fooCollection.push([])">Add a Namer</button>
</body>



创建单个列表项控制器：

js
HTML


告诉我你的名字：


你好，我的名字是{{foo.bar}
添加一个名字

您可以将true作为第三个参数传递到$watch中


$scope.$watch('something', function() { doSomething(); }, true);



如果您的收藏已填充，您可以在ng repeat的每个项目上放置一块手表：

html


<div ng-repeat="item in items">
   {{ item.itemField }}
</div>




{{item.itemField}


js


for (var i = 0; i < $scope.items.length; i++) {
   $scope.$watch('items[' + i + ']', function (newValue, oldValue) {
      console.log(newValue.itemField + ":::" + oldValue.itemField);
   }, true);
}



for（变量i=0；i<$scope.items.length；i++）{
$scope.$watch（'items['+i+']'，函数（newValue，oldValue）{
log（newValue.itemField+“：”+oldValue.itemField）；
}，对）；
}

您还可以创建一个自定义指令，该指令将告知主控制器所做的更改


YourModule.directive("batchWatch",[function(){
return {
    scope:"=",
    replace:false,
    link:function($scope,$element,$attrs,Controller){
        $scope.$watch('h',function(newVal,oldVal){
            if(newVal !== oldVal){
              Controller.updateChange(newVal,oldVal,$scope.$parent.$index);
            }

        },true);

    },
    controller:"yourController"
};
}]);


假设您的标记是这样的


<ul>
  <li ng-repeat="h in complicatedArrayOfObjects">
      <input type="text" ng-model="someModel" batch-watch="$index" />
  </li>
</ul>



您还可以使用directive link函数提供的值，该函数位于前3个参数scope、element和attr上。
因为我不想使用另一个控制器

简单JSFIDLE：

相关HTML：


<body ng-app="testApp" ng-controller="testCtrl">
    <div ng-repeat="foo in fooCollection">Tell me your name:
        <input ng-model="foo.bar" ng-change="fooChanged(foo)">
        <br />Hello, my name is {{foo.bar}}</div>
    <button ng-click="fooCollection.push({})">Add a Namer</button>
</body>


试着这样做


 <div ng-repeat="foo in fooCollection" ng-click="select(foo)">Tell me your ame:
        <input ng-model="foo.bar" ng-change="fooChanged(foo)">
        <br />Hello, my name is {{foo.bar}}</div>
        <button ng-click="fooCollection.push({})">Add a Namer</button>
 </div>



哇！我需要更多地考虑控制器是世界上一流的公民，因为它将行为附加到任何范围。只是一个提醒用户永远不要只链接到外部网站的评论。您必须在答案正文中给出代码。我的问题与OP相同，plnkr链接已断开，因此此答案无效：（这并没有回答原始问题：如何在ng repeat集合中的项目上放置手表。此嵌套控制器中的$watch代码是什么？从plunkr复制了相关代码，因此答案再次变得有用；-）。有人能解释一下为什么需要两个控制器吗？我认为ng-change比添加嵌套控制器更好。ng-change整洁、简单、清晰。添加嵌套控制器非常复杂，不必要

<ul>
  <li ng-repeat="h in complicatedArrayOfObjects">
      <input type="text" ng-model="someModel" batch-watch="$index" />
  </li>
</ul>



YourModule.controller("yourController",[$scope,function($scope){
    this.updateChange = function(newVal,oldVal,indexChanged){
      console.log("Details about the change");
    }
}]);



<body ng-app="testApp" ng-controller="testCtrl">
    <div ng-repeat="foo in fooCollection">Tell me your name:
        <input ng-model="foo.bar" ng-change="fooChanged(foo)">
        <br />Hello, my name is {{foo.bar}}</div>
    <button ng-click="fooCollection.push({})">Add a Namer</button>
</body>



angular.module('testApp', [])
    .controller('testCtrl', function ($scope) {
    $scope.fooCollection = [];

    $scope.fooChanged = function (foo) {
        console.log('foo.bar changed, new value of foo.bar is: ', foo.bar);
    };
});



 <div ng-repeat="foo in fooCollection" ng-click="select(foo)">Tell me your ame:
        <input ng-model="foo.bar" ng-change="fooChanged(foo)">
        <br />Hello, my name is {{foo.bar}}</div>
        <button ng-click="fooCollection.push({})">Add a Namer</button>
 </div>



 $scope.selectedfoo = {};
 $scope.select = (foo) => {
    $scope.selectedfoo = foo;
 }

 $scope.$watch('selectedfoo ', (newVal, oldVal) => {
  if (newVal) {

  }
 },true)