logo标签列表

AngularJS数字和范围的循环

angularjsangularjs-ng-repeat
258

Angular提供了一些支持，在其HTML指令中使用数字进行for循环：

<div data-ng-repeat="i in [1,2,3,4,5]">
  do something
</div>

但是，如果您的作用域变量包含具有动态数量的范围，则每次都需要创建一个空数组。

在控制器中

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>
这个代码可以工作，但是它是不必要的，因为在循环内部我们根本不会使用range数组。有人知道如何设置范围或常规的最小/最大值吗？
类似以下内容:

像这样：

<div data-ng-repeat="i in 1 .. 100">
  do something
</div>
3
以下是更多关于此的信息。http://www.yearofmoo.com/2012/10/more-angularjs-magic-to-supercharge-your-webapp.html#more-about-loops - matsko
23个回答
6
你可以在angular.filter模块中使用“after”或“before”过滤器（https://github.com/a8m/angular-filter）。
$scope.list = [1,2,3,4,5,6,7,8,9,10]

HTML:

<li ng-repeat="i in list | after:4">
  {{ i }}
</li>

结果：5、6、7、8、9、10

3
非常简单：

很简单：

$scope.totalPages = new Array(10);

 <div id="pagination">
    <a ng-repeat="i in totalPages track by $index">
      {{$index+1}}
    </a>   
 </div>
3

嗨，你可以使用纯HTML和AngularJS来实现这一点（无需指令！）

<div ng-app="myapp" ng-controller="YourCtrl" ng-init="x=[5];">
  <div ng-if="i>0" ng-repeat="i in x">
    <!-- this content will repeat for 5 times. -->
    <table class="table table-striped">
      <tr ng-repeat="person in people">
         <td>{{ person.first + ' ' + person.last }}</td>
      </tr>
    </table>
    <p ng-init="x.push(i-1)"></p>
  </div>
</div>
3

最短的答案：只需两行代码

JS（在您的AngularJS控制器中）

$scope.range = new Array(MAX_REPEATS); // MAX_REPEATS should be the most repetitions you will ever need in a single ng-repeat

HTML

<div data-ng-repeat="i in range.slice(0,myCount) track by $index"></div>

这里的myCount代表应该在此位置出现的星星数量。

您可以使用$index进行任何跟踪操作。例如，如果您想在索引上打印一些变化，则可以将以下内容放入div中：

{{ ($index + 1) * 0.5 }}
2
<div ng-init="avatars = [{id : 0}]; flag = true ">
  <div ng-repeat='data in avatars' ng-if="avatars.length < 10 || flag"
       ng-init="avatars.length != 10 ? avatars.push({id : $index+1}) : ''; flag = avatars.length <= 10 ? true : false">
    <img ng-src="http://actual-names.com/wp-content/uploads/2016/01/sanskrit-baby-girl-names-400x275.jpg">
  </div>
</div>

如果您想在HTML中实现此操作而不使用任何控制器或工厂。
2

使用 UnderscoreJS：

angular.module('myModule')
    .run(['$rootScope', function($rootScope) { $rootScope.range = _.range; }]);

将此应用于$rootScope，使其在任何地方都可用：
<div ng-repeat="x in range(1,10)">
    {{x}}
</div>
1
我是一名有用的助手，可以为您进行文本翻译。以下是需要翻译的内容：

晚来的派对。但最终我只是这样做了：

在您的控制器中：

$scope.repeater = function (range) {
    var arr = []; 
    for (var i = 0; i < range; i++) {
        arr.push(i);
    }
    return arr;
}

Html：

<select ng-model="myRange">
    <option>3</option>
    <option>5</option>
</select>

<div ng-repeat="i in repeater(myRange)"></div>
1

我尝试了以下内容，对我来说很好用：

<md-radio-button ng-repeat="position in formInput.arrayOfChoices.slice(0,6)" value="{{position}}">{{position}}</md-radio-button>

Angular 1.3.6
1
一种改进 @Mormegil 解决方案的方法。
app.filter('makeRange', function() {
  return function(inp) {
    var range = [+inp[1] && +inp[0] || 0, +inp[1] || +inp[0]];
    var min = Math.min(range[0], range[1]);
    var max = Math.max(range[0], range[1]);
    var result = [];
    for (var i = min; i <= max; i++) result.push(i);
    if (range[0] > range[1]) result.reverse();
    return result;
  };
});

使用
<span ng-repeat="n in [3, -3] | makeRange" ng-bind="n"></span>

3 2 1 0 -1 -2 -3

<span ng-repeat="n in [-3, 3] | makeRange" ng-bind="n"></span>

-3 -2 -1 0 1 2 3

<span ng-repeat="n in [3] | makeRange" ng-bind="n"></span>

0 1 2 3

<span ng-repeat="n in [-3] | makeRange" ng-bind="n"></span>

0 -1 -2 -3

1
在控制器中设置范围。
var range = [];
for(var i=20;i<=70;i++) {
  range.push(i);
}
$scope.driverAges = range;

在HTML模板文件中设置重复。
<select type="text" class="form-control" name="driver_age" id="driver_age">
     <option ng-repeat="age in driverAges" value="{{age}}">{{age}}</option>
</select>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接