Блог

Хорошо, проблема здесь довольно простая, но я просто не могу придумать, как ее решить.

Мне нужно создать таблицу с 5 строками и 5 столбцами с последовательными номерами [1 .. 25] с флажками внутри каждого столбца / строки. Каждый флажок имеет свое значение (от 1 до 25)

Я написал код для генерации изображения выше, просто зацикливая столбцы, но записывая каждую строку отдельно

     <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>
  

Есть ли способ написать этот код только в 2 цикла? Я думал о чем-то вроде приведенного ниже кода, но, очевидно, это не работает.

     <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>
  

Решение не обязательно должно быть в angular, но если оно будет, мы будем очень признательны ! 🙂

Спасибо!

Не уверен, откуда вы взяли директиву «makeRange», конечно, не стандартную ng.

Все, что вам нужно сделать, чтобы это сработало, это создать функцию на вашем контроллере для вычисления ваших значений n и p.

Итак, ваш HTML должен выглядеть следующим образом:

 <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>
  

И ваш JS, подобный этому:

 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;
  };
};
  

Пример здесь, на Fiddler:http://jsfiddle.net/sqren/ZBrJB

Я бы просто создал массив в обычном javascript, а затем использовал ng-repeat для этого массива из области видимости. Я сделал это в nested rows , но мог бы сделать все это в одном массиве и использовать css для настройки позиционирования

Контроллер:

 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);
  }
});
  

Разметка:

   <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