已解決430363個問題，去搜搜看，總會有你想問的

具有數和范圍的循環的AngularJS

首頁猿問具有數和范圍的循環的AngularJS

具有數和范圍的循環的AngularJS

AngularJS JavaScript

德瑪西亞99 2019-07-10 10:25:52

具有數和范圍的循環的AngularJS在其HTML指令中使用數字為for循環提供了一些支持：<div data-ng-repeat="i in [1,2,3,4,5]"> do something</div>但是，如果Scope變量包含一個具有動態數字的范圍，那么每次都需要創建一個空數組。在控制器中var range = [];for(var i=0;i<total;i++) { range.push(i);}$scope.range = range;在HTML中<div data-ng-repeat="i in range"> do something</div>這是可行的，但這是不必要的，因為我們將不會在循環中使用范圍數組。有沒有人知道設置最小/最大值的范圍或規則？類似于：<div data-ng-repeat="i in 1 .. 100"> do something</div>

查看完整描述

3 回答

慕萊塢森

TA貢獻1810條經驗獲得超4個贊

我調整了這個答案有點想出來這把小提琴.

過濾器定義為：

var myApp = angular.module('myApp', []);myApp.filter('range', function() {
  return function(input, total) {
    total = parseInt(total);

    for (var i=0; i<total; i++) {
      input.push(i);
    }

    return input;
  };});

重復使用如下：

<div ng-repeat="n in [] | range:100">
  do something</div>

反對回復 2019-07-10

HUX布斯

TA貢獻1876條經驗獲得超6個贊

我想出了一個更簡單的版本，用于在兩個定義的數字之間創建一個范圍，例如。5至15

參見JSFiddle演示

HTML:

<ul>
    <li ng-repeat="n in range(5,15)">Number {{n}}</li></ul>

控制器:

$scope.range = function(min, max, step) {
    step = step || 1;
    var input = [];
    for (var i = min; i <= max; i += step) {
        input.push(i);
    }
    return input;};

反對回復 2019-07-10

慕雪6442864

TA貢獻1812條經驗獲得超5個贊

我想出了一個稍微不同的語法，它更適合我，并添加了一個可選的下限：

myApp.filter('makeRange', function() {
        return function(input) {
            var lowBound, highBound;
            switch (input.length) {
            case 1:
                lowBound = 0;
                highBound = parseInt(input[0]) - 1;
                break;
            case 2:
                lowBound = parseInt(input[0]);
                highBound = parseInt(input[1]);
                break;
            default:
                return input;
            }
            var result = [];
            for (var i = lowBound; i <= highBound; i++)
                result.push(i);
            return result;
        };
    });

你可以用它作為

<div ng-repeat="n in [10] | makeRange">Do something 0..9: {{n}}</div>

或

<div ng-repeat="n in [20, 29] | makeRange">Do something 20..29: {{n}}</div>

反對回復 2019-07-10

3 回答
0 關注
829 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

具有數和范圍的循環的AngularJS

具有數和范圍的循環的AngularJS

3 回答

添加回答