Question

我正在开发一个AngularJS应用程序，该应用程序使用ng-repeat函数构建的2D数组构建电子表格。我正在编写一个函数，当用户在电子表格中输入新值时，该函数将更改数组的初始值。这要求我根据行索引和列索引访问初始数组中的点，以便将其更改为新值。

我查看了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循环内访问outer inner，并且也能够访问$index的{{1}} 。有没有办法做到这一点？我计划将这些值作为参数传递给我正在编写的函数。

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

这是我的代码，也许它会帮助你或者找到将2D数组循环到两个ng-repeat元素的人。 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>

AngularJS中的2D数组$ Index

2 个答案: