I have a 2D array that repeats through ng-repeat . This array is actually part of the spreadsheet application that I create, where the initial values in the spreadsheet are the data in the array. I wrote a function that would update this array when the user changed the input values, however I was informed that I need to use the $watch method instead of the onchange method.
I am really discarded because I don’t understand how I can change the initial values of the array using the $watch method. I see that it detects changes, but I want it to track this change and actually change the original array.
Here is my Javascript, including the start of the $watch method:
sheet= function($scope, $parse){ $scope.columns = headers; $scope.rows = allData.length; $scope.cells = {}; $scope.$watch( function() {console.log("Change!");}, ); $scope.values = allData.map(function(c,row){ return c.map(function(data){ return { content: data, model: null, color: makeColors(data) }; }); }); }; changeData = function(row, col, data){ allData[row][col] = data; };
My HTML:
<div ng-app ng-controller="sheet"> <table> <tr class="column-label"> <td ng-repeat="column in columns">{{column}}</td> <tr ng-repeat="value in values"> <td class="row-label" ng-repeat="data in value"> <div> <input type="text" id="inputValue" ng-model="data.content" class="{{data.color}}" onchange="changeData({{$parent.$index}},{{$index}},this.value)"> </div> </td> </tr> </table> </div>
As you can see, I call the changeData function using the values of $parent.$index and $index , which allow me to access and modify the original array. I am not sure how to do this through $watch .
source share