Динамическое обновление ng-repeat для матрицы

Question

У меня есть матрица (2D-массив) cells в модели, что я представляю в таблице.

<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. Для обновления страницы я использую $scope.$apply() после набора новой матрицы в cells

$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

В вашей скрипке вашего 2D массив не создаются corretly. Пожалуйста, посмотрите на это SO question, чтобы узнать, как настроить массив.

Я изменил эти моменты вашего кода:

• используется ng-options для длины и ширины выпадающего списка. Это проще, чем ng-repeat.
• Удалены события щелчка по ширине и длине и добавлены $watch для переменных ширины и длины для обновления карты.
• Обновлено создание массива 2d.

Ниже приведена рабочая демонстрация вашего кода или в этом 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]; 
 
\t 
 
    $scope.$watch('[width,length]', makeMap, true); 
 

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

 
    function matrix(rows, cols, defaultValue) { 
 
\t \t // code from here https://stackoverflow.com/questions/966225/how-can-i-create-a-two-dimensional-array-in-javascript 
 
     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>