本文介绍了如何 $watch 由 ng-repeat 创建的模型的变化?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这个 Plnkr 为例.我不知道会预先创建多少个 fooCollection 成员.所以我不知道会有多少 bar 模型存在.

但我知道它们将成为角度模型,而且我知道它们将在哪里.

我如何对这些进行 $watch 操作?

我需要这样做,因为我需要在 bar 模型更改时触发行为.观察 fooCollection 本身是不够的,$watch 监听器不会在 bar 改变时触发.

相关html:

相关JS:

角度.module('testApp', []).controller('testCtrl', function ($scope) {$scope.fooCollection = [];$scope.$watch('fooCollection', function (oldValue, newValue) {如果(新值!= 旧值)控制台日志(旧值,新值);});});
解决方案

创建单独的列表项控制器:Plnkr 上的演示

js

角度.module('testApp', []).controller('testCtrl', function ($scope) {$scope.fooCollection = [];}).controller('fooCtrl', function ($scope) {$scope.$watch('foo.bar', function (newValue, oldValue) {console.log('手表被触发,新值:' + newValue);});});

HTML

<body ng-controller="testCtrl"><div ng-repeat="(fooKey, foo) in fooCollection" ng-controller="fooCtrl">告诉我你的名字:<input ng-model="foo.bar" ng-change="doSomething()"><br/>你好,我的名字是 {{ foo.bar }}

<button ng-click="fooCollection.push([])">添加名称</button></html>

Consider this Plnkr for example. I don't know how many members of fooCollection will be created beforehand. So I don't know how many bar models are going to exist.

But I know they are going to be angular models, and I know where they are going to be.

How do I do a $watch on these?

I need to do that because I need to trigger behavior when a bar model is changed. Watching the fooCollection itself is not enough, the $watch listener does not fire when a bar is changed.

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

Relevant JS:

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

  $scope.$watch('fooCollection', function (oldValue, newValue) {
    if (newValue != oldValue)
      console.log(oldValue, newValue);
  });
});
解决方案

Create individual list-item controllers: demo on Plnkr

js

angular
  .module('testApp', [])
  .controller('testCtrl', function ($scope) {
    $scope.fooCollection = [];
  })
  .controller('fooCtrl', function ($scope) {
    $scope.$watch('foo.bar', function (newValue, oldValue) {
      console.log('watch fired, new value: ' + newValue);
    });
  });

HTML

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

这篇关于如何 $watch 由 ng-repeat 创建的模型的变化?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-02 00:10