test test - 3 months ago 8
Javascript Question

how to watch an array property of array of array?

$scope.arr = [
[["TTT", 23],3],
[["PPP", 23],3],
[["KKK", 23],3]
];


I need to apply watch on arr[0][0][0] element of array.

Rendering arr[0][0][0], arr[1][0][0], arr[2][0][0] in text box using ng-model through ng-repeat for all arrays.

how to apply watch on ng-model variable as soon as i type something in text box?

I tried to apply watch on entire array arr but it didn't trigger below watch function

$scope.$watch($scope.arr, function (newVal, oldVal)
{
$log.log(newVal);
}
);


html:

<div ng-repeat="el in arr">
Name: <input type="text" ng-model = "el[0][0]" />
</div>

Answer

It seems the issue lies in the fact that a new scope is being generated for each iteration of ng-repeat. To get around this, you can attach a separate controller for each iteration, like explained here.

The simplest way I can think of to get around this without multiple controllers is to utilize the ng-change directive, like so:

JS:

$scope.getChanged = function(newValue) {
  alert('getChanged(), new value: ' + newValue);
}

HTML:

<input type="text" ng-model="a[0][0]" ng-change="getChanged(a[0][0])" />

Here's a fiddle showing it in action.