动态更新矩阵的 ng-repeat

Question

我在模型中有矩阵（二维数组）cells，我在 table 中表示的内容。

<tr ng-repeat='row in cells track by $index'>
    <td ng-repeat='cell in row track by $index'>
        {{cell}}
    </td>
</tr>

我想添加一个下拉按钮来调整长度和宽度，

<select ng-model="length"  >
    <option ng-repeat="size in sizes" ng-click="setLength(size)">{{size}}       </option>
</select>

但无法刷新 ng-repeat。对于刷新页面，我在 cells

中设置新矩阵后使用 $scope.$apply()

$scope.cells = new Array($scope.width);
    for (var i = 0; i < $scope.cells.length; i++) {
        $scope.cells[i] = new Array($scope.length);
        for (var j = 0; j < $scope.length; j++) {
            $scope.cells[i][j] = 'cell';
        }
    }

$scope.$apply();

但这无济于事。如何刷新ng-repeat?

P.S。当用户改变大小矩阵时，它应该返回到新大小的默认值。

my demo is here

Answer 1

在您的 fiddle 中，您的二维数组未正确创建。请查看此 SO question 以获取有关如何设置阵列的提示。

我已经更改了您代码的这些要点：

使用了 ng-options 的长度和宽度下拉菜单。这比 ng-repeat.
从宽度和长度下拉列表中删除了点击事件，并为更新地图的宽度和长度范围变量添加了 $watch。
更新了二维数组的创建。

下面是您的代码的工作演示或在此 fiddle。

var myapp = angular.module('mapApp', []);

myapp.controller('editorController', function ($scope) {

    $scope.cells = [
        []
    ];
    $scope.sizes = [];

    makeSizes();

    $scope.length = $scope.sizes[0];
    $scope.width = $scope.sizes[0];
 
    $scope.$watch('[width,length]', makeMap, true);

    function makeMap() {
        var cols = $scope.width,
            rows = $scope.length;
  console.log('makeMap');
        $scope.cells = matrix(rows, cols, 'cell');
    }

    function matrix(rows, cols, defaultValue) {
  // code from here 
        var arr = [[]];

        // Creates all lines:
        for (var i = 0; i < rows; i++) {

            // Creates an empty line
            arr[i] = [];

            // Adds cols to the empty line:
            arr[i] = new Array(cols);

            for (var j = 0; j < cols; j++) {
                // Initializes:
                arr[i][j] = defaultValue;
            }
        }

        return arr;
    }

    makeMap();

    function makeSizes() {
        for (var i = 0; i < 5; i++) {
            $scope.sizes.push(i + 3);
        }
    }
    
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mapApp" ng-controller="editorController">
    <label>Length</label>
    <select ng-model="length" ng-options="length for length in sizes">
        </select>
    <table>
    <label>Width</label>
    <select ng-model="width" ng-options="width for width in sizes">
        </select>
    <table>
        <tbody>
            <tr ng-repeat="row in cells track by $index">
                <td ng-repeat="cell in row track by $index">
                    {{cell}}
                </td>
            </tr>
        </tbody>
    </table>
</div>

动态更新矩阵的 ng-repeat

Dynamically updating ng-repeat for matrix

page-refresh

angularjs

ng-repeat

angularjs-ng-repeat