How to create a multidimensional matrix with sequential numbers using angularJs

Question

Ok, the issue here is pretty simple but i just can't think how to solve it.

I need to create a table with 5 lines and 5 columns with a sequential numbers [1..25] with checkboxes inside each column/row. Each checkbox has it value (between 1 and 25)

enter image description here

I wrote a code to generate the image above, just looping columns, but writing every row separately

    <div class="row">
        <div class="col" ng-repeat="n in [1, 5] | makeRange">
            <ul class="list">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
                    </label>
                    {{n}}
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col" ng-repeat="n in [6, 10] | makeRange">
            <ul class="list">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
                    </label>
                    {{n}}
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col" ng-repeat="n in [11, 15] | makeRange">
            <ul class="list">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
                    </label>
                    {{n}}
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col" ng-repeat="n in [16, 20] | makeRange">
            <ul class="list">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
                    </label>
                    {{n}}
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col" ng-repeat="n in [21, 25] | makeRange">
            <ul class="list">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" checklist-model="game.numbers" checklist-value="n" value="{{n}}">
                    </label>
                    {{n}}
                </li>
            </ul>
        </div>
    </div>

Is there a way to write this code in 2 loops only? I was thinking in something like the code below, but obviously doesn't work.

    <div class="row" ng-repeat="n in [1, 4] | makeRange">
        <div class="col" ng-repeat="p in [1, 4] | makeRange">
            <ul class="list">
                <li class="item item-checkbox">
                    <label class="checkbox">
                        <input type="checkbox" checklist-model="game.numbers" checklist-value="p" value="{{n}}">
                    </label>
                    {{p * n}}
                </li>
            </ul>
        </div>
    </div>

The solution doesn't have to be in angular, but if it be will be much appreciated ! :)

Thanks!

Alberto · Accepted Answer · 2014-07-05 01:22:33Z

2

Not sure where you got the "makeRange" directive, certainly not a default ng one.

All you need to do to make this work is to create a function on your controller to calculate your n and p values.

So, your HTML should look like this:

<div ng-app='myApp' ng-controller="Main">
  <div class="row" ng-repeat="n in range(0,4)">
    <div class="col" ng-repeat="p in range(1,5)">
        <ul class="list">
            <li class="item item-checkbox">
                <label class="checkbox">
                    <input type="checkbox" checklist-model="game.numbers" checklist-value="p" value="{{n}}">
                </label>
                {{n*5+p}}
            </li>
        </ul>
    </div>
</div>

And your JS like this:

var myApp = angular.module('myApp', []);
function Main($scope){
  $scope.range = function(min, max){
    var input = [];
    for (var i=min; i<=max; i++) input.push(i);
    return input;
  };
};

Sample here on Fiddler: http://jsfiddle.net/sqren/ZBrJB/

answered Jul 5, 2014 at 1:22

Alberto

8885 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hugo Dias Over a year ago

Problem solved ! The makeRange directive actually make the same thing that your range function. I'd just changed the {{n * p}} to your suggestion -> {{ n * 5 + p }} and it's working like it should. Thanks a lot.

charlietfl · Accepted Answer · 2014-07-05 01:21:51Z

2

I would just create the array in plain javascript and then use ng-repeat on that array from the scope. I did this in nested rows but could do it all in one array and use css to adjust positioning

Controller:

app.controller('MainCtrl', function($scope) {
  var ctr=0;
  $scope.rows = [];
  for (var i = 0; i < 5; i++) {
    var row = [];
    for (var j = 0; j < 5; j++) {
      ctr++;
      row.push({val: ctr})
    }
    $scope.rows.push(row);
  }
});

Markup:

  <div ng-repeat="row in rows" class="row">
      <ul class="list">
        <li class="item item-checkbox"  ng-repeat="item in row">
          <label class="checkbox">
            <input type="checkbox" ng-model="item.checked" />{{item.val}}
          </label>
        </li>
      </ul>   
  </div>

DEMO

edited Jul 5, 2014 at 1:21

answered Jul 5, 2014 at 1:12

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

How to create a multidimensional matrix with sequential numbers using angularJs

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related