مشاهدة التغييرات على النماذج التي تم إنشاؤها بواسطة نانوغرام-كرر?
-
21-12-2019 - |
سؤال
النظر هذا بلنكر على سبيل المثال.أنا لا أعرف كم عدد أعضاء fooCollection
سيتم إنشاؤه مسبقا.لذلك أنا لا أعرف كم bar
النماذج ستكون موجودة.
لكنني أعلم أنها ستكون نماذج زاوية ، وأعرف أين ستكون.
كيف أفعل $watch
على هذه?
ولست بحاجة للقيام بذلك لأنني بحاجة لتحريك السلوك عندما bar
تم تغيير النموذج.مشاهدة جمع الطعام في حد ذاته لا يكفي ، و $watch
المستمع لا يطلق النار عندما bar
يتم تغيير.
أتش تي أم أل ذات الصلة:
<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>
شبيبة ذات الصلة:
angular
.module('testApp', [])
.controller('testCtrl', function ($scope) {
$scope.fooCollection = [];
$scope.$watch('fooCollection', function (oldValue, newValue) {
if (newValue != oldValue)
console.log(oldValue, newValue);
});
});
المحلول
إنشاء قائمة فردية-وحدات تحكم العنصر: عرض على بلنكر
شبيبة
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 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>
نصائح أخرى
إذا كان لديك مجموعتك بالسكان ، يمكنك وضع ساعة على كل بند من نغ-كرر:
أتش تي أم أل
<div ng-repeat="item in items">
{{ item.itemField }}
</div>
شبيبة
for (var i = 0; i < $scope.items.length; i++) {
$scope.$watch('items[' + i + ']', function (newValue, oldValue) {
console.log(newValue.itemField + ":::" + oldValue.itemField);
}, true);
}
يمكنك تمرير صحيح كحجة ثالثة في watch مشاهدة
$scope.$watch('something', function() { doSomething(); }, true);
يمكنك أيضا إنشاء توجيه مخصص يخبر وحدة التحكم الرئيسية الخاصة بك بالتغييرات
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>
وهذا هو جهاز التحكم الخاص بك
YourModule.controller("yourController",[$scope,function($scope){
this.updateChange = function(newVal,oldVal,indexChanged){
console.log("Details about the change");
}
}]);
يمكنك أيضا أن تلعب حول القيمة التي تقدمها وظيفة الارتباط التوجيه الذي يجلس على أول 3 الحجج ، نطاق ، عنصر و أتر.
منذ لم أكن أريد وحدة تحكم أخرى انتهى بي الأمر باستخدام نغ-التغيير بدلا من ذلك.
جسفيدل بسيطة: https://jsfiddle.net/maistho/z0xazw5n/
أتش تي أم أل ذات الصلة:
<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)