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.

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.

• javascript
• angularjs
• angularjs-ng-repeat

• Maybe there's a more straight-forward answer, but I would proabably just start checking out ng-repeat, perhaps you can just write you're own directive that specifically handles this case for you. A good question though. – shaunhusain Commented Jul 9, 2013 at 16:09
• 2 $parent.$index or maybe $parent().$index - One of these two should work. – rGil Commented Jul 9, 2013 at 16:45
• $parent.$index works. Thanks! – user2465164 Commented Jul 9, 2013 at 16:51

2 Answers 2

Haha, well, it was answered in the ments while I was putting together my fiddle, but here's a demonstration of it for people finding this question down the road:

http://jsfiddle/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>

Here is my code, maybe it will help you or someone who find the way to loop 2D array into two ng-repeat element. HTML code

<div ng-repeat="row in gameMatrix track by $index">
    <div id=cell_{{row.id}}>
    </div>
</div>

Javascript code:

$scope.gameData = [
    [1, 0, 0],
    [1, 0, 0],
    [1, 0, 0],
    [1, 0, 0]
];

$scope.presentCellsData = function() {
    var Str = "";
    var rows = [];
    var term = [];
    for (i = 0; i < $scope.gameData.length; i++) {
        Str = "";
        rows = "";
        for (j = 0; j < $scope.gameData[i].length; j++) {
            console.log("i j " + i + " " + j);
            console.log($scope.gameData[i][j]);
            Str = "<div style='display:inline-block'> " + $scope.gameData[i][j] + "&nbsp;</div>";
            rows += Str;
        }
        rows += "</br>";
        term.push({ "id": i, "data": rows });
    }
    console.log(term);
    return term;
}

$scope.gameMatrix = $scope.presentCellsData();
angular.element(document).ready(function() {
    for (i = 0; i < $scope.gameMatrix.length; i++) {
        console.log("$scope.gameMatrix[i]");
        console.log($scope.gameMatrix[i]);
        document.getElementById("cell_" + i).outerHTML = $scope.gameMatrix[i].data;
    }
});

@Karen: thanks you, I can using your code in that way with my data:

<div style="display: inline-block;" ng-repeat="row in gameData track by $index">
        <!-- <div id=cell_{{row.id}}>
            aaa
        </div> -->
        <div ng-repeat="cell in row track by $index">
            {{cell}}
        </div>
    </div>