Question

好的，这里的问题很简单，但我想不出怎么解决它。

我需要创建一个包含5行和5列的表，其中包含序列号[1..25]，每列/每行内都有复选框。每个复选框都有它的值（1到25之间）

enter image description here

我编写了一个代码来生成上面的图像，只是循环列，但是分别编写每一行

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

解决方案不一定是有角度的，但如果它会非常感激！：）

谢谢！

Answer 1

我只是在普通的javascript中创建数组，然后在范围内的数组上使用ng-repeat。我在嵌套的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

Answer 2

不确定你在哪里获得“makeRange”指令，当然不是默认指令。

您需要做的就是在控制器上创建一个函数来计算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/

如何使用angularJs创建具有序号的多维矩阵

2 个答案: