AngularJS keeps track of an object property in an array of objects

Question

I have this data in my controller

  $scope.data = { home: { baseValue: "1", name: "home" }, contact: { baseValue: "2", name: "contract" } // a lot more options }; 

with some html as follows:

 <section class="content row" ng-repeat="item in data"> {{item.name}} .... </section> 

Now I want to know when the baseValue changes, but due to the fact that I use objects inside the data variable, I can not watch property in a simpler way.

I tried something like this, but I need to loop the entire array

 $scope.$watch('data', function (newValue, oldValue, scope) { // some code to compare the tow arrays, line by line }, true); 

How can I make a simpler $watch to know only when changing baseValue ?

Related questions:

• AngularJS object view arrays to modify data
• How to get an object that has been modified in angularjs?
• How to deeply observe an array in angularjs?

UPDATE 1

I could add an individual clock for each object to know when the baseValue changes, but it would not be good if I had the number of objects n , and not just a few objects like this example

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

Answer 1

According to your question, you can use ngChange to view baseValue changes and run the function.

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> 

controller

 $scope.baseValueChange = function(baseValue) { console.log("base value change", baseValue); } 

If you have a more complex version that can get oldValue and newValue, you can refer to this 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> 

controller

 $scope.baseValueChange = function(oldVal, newVal) { console.log("base value change", oldVal, newVal); } 

Answer 2

You can view the attribute of an object.
So you can do something like

 for(var key in $scope.data) { if($scope.data.hasOwnProperty(key)) { $scope.$watch("data['" + key + "'].baseValue", function(val, oldVal) { // Do stuff }); } } 

Not tested, but the idea is simple.

Answer 3

In this scenario, there is no way to get around using a few hours, another way to do this is by using $watchCollection to view an array of object values, you can get this array using the Object.values function.

 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); } }); 

Answer 4

I decided with this solution:

 $scope.updateFields= function(){ angular.forEach($scope.fields,function (value, key) { value.title = value.title.toLowerCase().replace(/\s+/g,''); }) }; $scope.$watch('fields', $scope.updateFields, true);