Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

2D array $Index in AngularJS

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.

like image 235
user2465164 Avatar asked Jul 09 '13 16:07

user2465164


1 Answers

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>
like image 176
Karen Zilles Avatar answered Nov 20 '22 08:11

Karen Zilles