javascript AngularJS 中的二维数组 $Index
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17553016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
2D array $Index in AngularJS
提问by user2494584
I'm working on an AngularJS app that builds a spreadsheet out of a 2D array built by the ng-repeatfunction. 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.
我正在开发一个 AngularJS 应用程序，该应用程序从ng-repeat函数构建的二维数组中构建电子表格。我目前正在编写一个函数，当用户在电子表格上输入新值时，该函数将更改数组的初始值。这要求我根据其行索引和列索引访问初始数组中的点，以便我可以将其更改为新值。
I have looked over the ng-repeat APIand found that it has an $indexproperty 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.
我查看了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>
I want to access the $indexof outerwhile within the innerloop, and also be able to access the $indexof the inner, too.
Is there a way to do this? I plan on passing these values as parameters to the function I'm writing.
我想访问$index的outer，而内inner循环，还能够访问$index的inner，太。有没有办法做到这一点？我计划将这些值作为参数传递给我正在编写的函数。
回答by Karen Zilles
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:
哈哈，好吧，当我整理我的小提琴时，它在评论中得到了回答，但这里有一个演示，供人们在路上找到这个问题：
<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>
回答by nobjta_9x_tq
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
这是我的代码，也许它会帮助您或找到将二维数组循环为两个 ng-repeat 元素的方法的人。 HTML代码
<div ng-repeat="row in gameMatrix track by $index">
<div id=cell_{{row.id}}>
</div>
</div>
Javascript code:
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] + " </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:
@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>
