2D配列$ Index in AngularJS

Question

私は、ng-repeat関数で構築された2D配列からスプレッドシートを作成するAngularJSアプリケーションに取り組んでいます。私は現在、ユーザーがスプレッドシートに新しい値を入力したときに配列の初期値を変更する関数を書いています。これは、行インデックスと列インデックスに基づいて初期配列内のポイントにアクセスする必要があるため、新しい値に変更することができます。

私はng-repeat APIを調べましたが、現在の繰り返し値のインデックスを確認できる$indexプロパティがあります。しかし、私はそれだけで私はあなたが内側にあるものは何でも繰り返しループの値のインデックスをチェックできるようになることを発見しています - 。いいえ、他の外のループあなたもであってもよい

<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> 

私は$indexにアクセスしたいですinnerループ内にあり、innerの$indexにアクセスすることもできます。 これを行う方法はありますか？私はこれらの値を、私が書いている関数にパラメータとして渡すことを計画しています。私は一緒に私のバイオリンを入れていた一方で

Answer 1

母は、まあ、それはコメントで答えましたが、ここでは道、この質問を見つける人々のためのそれのデモです：ここで

http://jsfiddle.net/V8qzt/1/

<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> 

Answer 2

は、私のコードです、おそらくそれはあなたや2つのng-repeat要素に2D配列をループする方法を見つける人を助けるでしょう。 HTMLコード

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

Javascriptコード：

$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：

<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>