6

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

我查看了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>

我想在循环中访问 while $index，并且也能够访问the 。有没有办法做到这一点？我计划将这些值作为参数传递给我正在编写的函数。outerinner$indexinner

4

2 回答 2

13

哈哈，好吧，在我整理小提琴时，评论中已经回答了，但这里有一个演示，供人们在路上找到这个问题：

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>
于 2013-07-09T17:00:31.237 回答
0

这是我的代码，也许它会帮助您或找到将二维数组循环成两个 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>
于 2017-07-24T08:55:06.503 回答