I'm working on an AngularJS app that builds a spreadsheet out of a 2D array built by the ng-repeat
function. I'm currently writing a function that will change the initial values of the array when the user enters new values on the spreadsheet. This requires me to access the point in the initial array based on its row index and column index so I can change it to the new value.
I have looked over the ng-repeat API and found that it has an $index
property that allows me to check the index of the current repeated value. However, I am finding that it will only let me check the index of the value of whatever repeat loop you are inside--no other outside loops that you may also be in.
<script>
data = [
[A1, B1, C1],
[A2, B2, C2],
[A3, B3, C3]
]
sheet= function($scope, $parse){
$scope.columns = [colA, colB, colC];
$scope.rows = data.length;
$scope.cells = {};
$scope.outer = data.map(function(c,row){
return c.map(function(data, ind){
return {
content: data,
model: null,
};
});
});
};
</script>
<div ng-app ng-controller="sheet">
<table>
<tr class="column-label">
<td ng-repeat="column in columns">{{column}}</td>
<tr ng-repeat="inner in outer">
<td class="row-label" ng-repeat="data in inner">
<div>
<input type="text" ng-model="data.content" value="{{data.content}}">
</div>
</td>
</tr>
</table>
</div>
I want to access the $index
of outer
while within the inner
loop, and also be able to access the $index
of the inner
, too.
Is there a way to do this? I plan on passing these values as parameters to the function I'm writing.
Haha, well, it was answered in the comments while I was putting together my fiddle, but here's a demonstration of it for people finding this question down the road:
http://jsfiddle.net/5s6z1dfc/2/
<div ng-controller="MyCtrl">
<table>
<tr ng-repeat="row in data">
<td ng-repeat="cell in row">
{{cell}} ({{$index}},{{$parent.$index}})
</td>
</tr>
</table>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With