Dynamically updating ng-repeat for matrix

Question

I have matrix(2D array) cells in model, what I represent in a table.

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

I want add a drop down buttons to resize length and width,

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

but can't refresh ng-repeat. For refresh page I use $scope.$apply() after set new matrix in 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();

but it doesn't help. How to refresh ng-repeat?

P.S. When user is changing size matrix, it should back to default values with new size.

my demo is here

your demo is missing data, and this question is missing the code from demo — smnbbrv, Sep 03 '15 at 17:31
@smnbbrv when user is changing size matrix it should back to default values with new size. — Loniks, Sep 03 '15 at 17:35

score 1 · Accepted Answer · edited May 23 '17 at 10:27

In your fiddle your 2D array is not created corretly. Please have a look at this SO question for tips how to setup the array.

I've changed these points of your code:

used ng-options for length and width dropdown. That's easier than ng-repeat.
Removed click events from the width and length drop down and added a $watch for width and length scope variables for updating the map.
Updated creation of 2d array.

Below is a working demo of your code or in this 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 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>

Dynamically updating ng-repeat for matrix

1 Answers1