angular: $watch object in array of objects

Question

For example, I have an array of objects.

$scope.items = [
    {id: 1, name: 'one'},
    {id: 2, name: 'two'},
    {id: 2, name: 'three'}
];

And have in template something like

<div ng-repeat="item in items">
    <input type="text" ng-model="item.name" />
</div>

And I want to add $watch to this like (for track changes in inputs)

$scope.$watch('item', function(newVal){}, true);

What I need to do, if I want have in newVal item like {id: 1, name: 'one'}?

Not array of objects! Only one changed object in newVal! I can't create variables for each object of the array in the controller.

I tried something like

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

but that wrong.

@Cerbus Why do you think that other question is similar? There is changes all array, and I need changes only objects in array. — Luntegg
– Luntegg, Commented Jun 17, 2016 at 14:46

Satpal · Accepted Answer · 2016-06-17 13:39:00Z

2

You can try something like

for (var i = 0; i < $scope.items.length; i++) {
    (function(k){
        $scope.$watch(function(){
            return $scope.items[k]
        }, function(newVal) {
            console.log(newVal);
        }, true);
    })(i);
}

Note: I have not tested the above code;

edited Jun 17, 2016 at 13:39

answered Jun 17, 2016 at 13:33

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hadi · Accepted Answer · 2016-06-17 15:07:03Z

1

try this.

var app = angular
  .module('MyApp', [])
  .controller('Main', ['$scope', function($scope) {
      var vm = this;
      vm.items = [
          {id: 1, name: 'one'},
          {id: 2, name: 'two'},
         {id: 2, name: 'three'}
       ];
   for (var i = 0; i < vm.items.length; i++) {
     $scope.$watch('ctrl.items[' + i + ']', function(newVal) {
        console.log(newVal);
       }, true);
     }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="main-content" ng-app="MyApp" ng-controller="Main as ctrl">
<div ng-repeat="item in ctrl.items">
    <input type="text" ng-model="item.name" />
</div>
</div>

edited Jun 17, 2016 at 15:07

answered Jun 17, 2016 at 13:41

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

1 Comment

Luntegg Over a year ago

this is only value, not all object

Collectives™ on Stack Overflow

angular: $watch object in array of objects

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related