Question

我有一个包含int属性x的JSON对象，我想重复代码x次

<span class="glyphicon glyphicon-star"/>

ng-repeat似乎没有显示，因为它正在使用收集任何建议（角度新手）

Answer 1

我会使用自定义过滤器ng-repeat：

<强> HTML

<div ng-app='myApp' ng-controller="Main">
    <li ng-repeat="n in [] | range:20">
      <span class="glyphicon glyphicon-star" >{{n}}</span>
    </li>
</div>

过滤

app.filter('range', function() { return function(val, range) { range = parseInt(range); for (var i=0; i<range; i++) val.push(i); return val; }; });

演示 Fiddle

Answer 2

最短答案：2行代码

JS（在你的AngularJS控制器中）

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

<强> HTML

<span class="glyphicon glyphicon-star" ng-repeat="i in range.slice(0,starCount) track by $index"/>

...其中starCount是应该出现在此位置的星数。

Answer 3

你可以写过滤范围：

'use strict';

angular.module('app.Filter')
.filter('range', function() {
    return function(input, total) {
        total = parseInt(total);
        for (var i=0; i < total; ++i) {
            input.push(i);
        }
        return input;
    };
});

然后使用它

<span class="glyphicon glyphicon-star" ng-repeat="i in [] | range:5"/>

5你的x

Answer 4

当我第一次开始使用AngularJS时，我找到了一个体面的教程，引导您制作一个自定义指令，用于在Angularjs中执行“评级”小部件。

http://www.befundoo.com/university/tutorials/angularjs-directives-tutorial/

除了根据指令中定义的双向绑定范围变量的值创建空对象的集合之外，它们不会做任何特殊操作。

directive('fundooRating', function () {
    return {
        restrict: 'A',
        template: '<ul class="rating">' +
                      '<li ng-repeat="star in stars" class="filled">' +
                          '\u2605' +
                      '</li>' +
                  '</ul>',
        scope: {
            ratingValue: '='
        },
        link: function (scope, elem, attrs) {
            scope.stars = [];
            for (var i = 0; i < scope.ratingValue; i++) {
                scope.stars.push({});
            }
        }
    }
});

好处是收集混乱至少封装在指令内部，而控制器所要做的就是处理数字评级值。本教程还将引导您在命令值范围变量上执行指令与控制器之间的双向链接。

恕我直言，这是最清晰的解决方案，因为AngularJS不直接支持你想做的事情。至少在这里，很容易理解你在控制器和视图中想要做什么（这是你想要避免不必要的复杂性的地方）并且你将hackish-ness移动到指令中（你可能会写一次并忘记）。

Answer 5

Angular（V1.2.9及更高版本）包含一个过滤器limitTo:n，可以开箱即用。例如，要将ng-repeat限制为前20个元素，请使用以下语法：

<div ng-app='myApp' ng-controller="Main">
    <li ng-repeat="n in [] | limitTo:20">
      <span class="glyphicon glyphicon-star" >{{n}}</span>
    </li>
</div>

limitTo 的文档为here

公平地说，limitTo过滤器在提出原始问题时并不存在。

Answer 6

我回答了类似的（重复？）问题https://stackoverflow.com/a/31864879/1740079。我会在这里重新发布，因为我也在这里寻找答案。

<div repeat-times="4">{{ $index }}</div>

...和html：

{{1}}

LIVE EXAMPLE

角重复<span> n次</span>

6 个答案:

最短答案：2行代码