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

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

javascript arrays angularjs loops for-loop

Javascript 如何使用angularJs创建具有序列号的多维矩阵,javascript,arrays,angularjs,loops,for-loop,Javascript,Arrays,Angularjs,Loops,For Loop,好的，这里的问题很简单，但我就是想不出如何解决它我需要创建一个表，表中有5行5列，每个列/行中都有复选框，编号为[1..25]。每个复选框都有其值（介于1和25之间）我编写了一个代码来生成上面的图像，只是循环列，但每行都是单独编写的 <div class="row"> <div class="col" ng-repeat="n in [1, 5] | makeRange"> <ul class="list">

好的，这里的问题很简单，但我就是想不出如何解决它

我需要创建一个表，表中有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>




{{n}}




{{n}}




{{n}}




{{n}}




{{n}}

有没有办法只在两个循环中编写此代码？我在想下面的代码，但显然不起作用

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




{{p*n}}

解决方案不一定要有角度，但如果有角度，我们将不胜感激！：）

谢谢

我只需要用纯javascript创建数组，然后从作用域中对该数组使用

ng repeat

。我在嵌套的

行中执行了此操作，但可以在一个数组中完成所有操作，并使用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);
  }
});

app.controller（'MainCtrl'，函数（$scope）{
var-ctr=0；
$scope.rows=[]；
对于（变量i=0；i<5；i++）{
var行=[]；
对于（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>




{{item.val}}



我只需要用纯javascript创建数组，然后从作用域中对该数组使用ng repeat
。我在嵌套的行中执行了此操作，但可以在一个数组中完成所有操作，并使用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);
  }
});

app.controller（'MainCtrl'，函数（$scope）{
var-ctr=0；
$scope.rows=[]；
对于（变量i=0；i<5；i++）{
var行=[]；
对于（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>




{{item.val}}



不确定从何处获得“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>

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




{{n*5+p}




你的JS是这样的：
<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>

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

var myApp=angular.module（'myApp'，[]）；
主要功能（$scope）{
$scope.range=函数（最小值、最大值）{
var输入=[]；
对于（var i=min；i不确定从哪里获得了“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>

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




{{n*5+p}




你的JS是这样的：
<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>

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

var myApp=angular.module（'myApp'，[]）；
主要功能（$scope）{
$scope.range=函数（最小值、最大值）{
var输入=[]；
对于（var i=min；iProblem solved！makeRange指令实际上与您的范围函数做了相同的事情。我刚刚将{{n*p}更改为您的建议->{n*5+p}}，它的工作方式应该是一样的。非常感谢。问题解决了！makeRange指令实际上与您的范围函数做了相同的事情。我刚刚更改了{{n*p}}根据你的建议-->{n*5+p}并且它正在正常工作。非常感谢。