如何使用angularJs創建具有連續數字的多維矩陣

Question

好的，這裏的問題非常簡單，但我無法考慮如何解決它。

我需要創建一個帶有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> 

該解決方案不一定是在角度，但如果是將非常感謝！ :)

謝謝！

Answer 1

不知道你在哪裏得到了「makeRange」di rective，當然不是默認的。

所有你需要做的工作就是在你的控制器上創建一個函數來計算你的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; 
    }; 
}; 

樣品這裏小提琴手：http://jsfiddle.net/sqren/ZBrJB/

Answer 2

我只是在普通的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