AngularJS监视对象数组中的对象属性
我有我的控制器中的这些data
$scope.data = { home: { baseValue: "1", name: "home" }, contact: { baseValue: "2", name: "contract" } // a lot more options };
用一些这样的HTML：
<section class="content row" ng-repeat="item in data"> {{item.name}} .... </section>
现在，我想知道什么时候baseValue被改变，但是由于我在数据variables中使用了一个对象，所以我不能以更简单的方式watch这个属性。
我已经尝试过这样的事情，但我必须循环所有的数组
$scope.$watch('data', function (newValue, oldValue, scope) { // some code to compare the tow arrays, line by line }, true);
我怎样才能做一个简单的$watch只知道baseValue更改？
类似的问题：
- AngularJS监视数据更改的对象数组
- 如何获得在angularjs中更改的对象？
- 如何深入观察angularjs中的数组？
更新 1
我可以为每个对象添加一个单独的手表，以便知道baseValue更改，但是如果我有n个对象，则不会很好，不仅仅是这个例子中的一对对象
$scope.$watch('data.home', function (newValue, oldValue, scope) { // do some stuff with newvalue.baseValue }, true); $scope.$watch('data.contact', function (newValue, oldValue, scope) { // do some stuff with newvalue.baseValue }, true); ... // Adds more individual `watch`
根据你的问题，你可以使用ngChange观察baseValue变化并触发该函数。
HTML
<section class="content row" ng-repeat="item in data"> Name: {{item.name}} <br/> BaseValue: <input type="text" ng-model="item.baseValue" ng-change="baseValueChange(item.baseValue)"/> </section>
调节器
$scope.baseValueChange = function(baseValue) { console.log("base value change", baseValue); }
如果你有一个更复杂的版本可以得到oldValue和newValue，你可以参考这个plunkr – http://plnkr.co/edit/hqWRG13gzT9H5hxmOIkO?p=preview
HTML
<section class="content row" ng-repeat="item in data"> Name: {{item.name}} <br/> BaseValue: <input type="text" ng-init="item.oldBaseValue = item.baseValue" ng-model="item.baseValue" ng-change="baseValueChange(item.oldBaseValue, item.baseValue); item.oldBaseValue = item.baseValue"/> </section>
调节器
$scope.baseValueChange = function(oldVal, newVal) { console.log("base value change", oldVal, newVal); }
你可以看一个对象的属性。
所以你可以做类似的事情
for(var key in $scope.data) { if($scope.data.hasOwnProperty(key)) { $scope.$watch("data['" + key + "'].baseValue", function(val, oldVal) { // Do stuff }); } }
没有testing，但想法很简单。
在这种情况下，没有办法绕过使用多个手表，另一种方法是利用$watchCollection来观察对象值的数组，您可以使用Object.values函数来获取这个数组。
scope.$watchCollection(function() { return Object.values(obj); }, function(newValues, oldValues) { // now you are watching all the values for changes! // if you want to fire a callback with the object as an argument: if (angular.isFunction(scope.callback())) { scope.callback()(obj); } });
我解决了这个解决scheme：
$scope.updateFields= function(){ angular.forEach($scope.fields,function (value, key) { value.title = value.title.toLowerCase().replace(/\s+/g,''); }) }; $scope.$watch('fields', $scope.updateFields, true);
