我有一个 JSON 对象，其中包含一个 int 属性 x，我想重复以下代码 x 次
<span class="glyphicon glyphicon-star"/>
似乎未指示 ng-repeat，因为它正在处理集合。
任何建议（角度新手）
【问题讨论】：
ng-repeat 不太符合要求的极端情况之一；你想要那种ng-replicate="n" 但在角度绑定中不存在的东西（还）。因此，您可以选择在控制器中声明 Array(n) 然后循环它或自己创建 ng-replicate。
标签： angularjs
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过滤器在提出原始问题时并不存在。
【讨论】：
我回答了一个类似的（重复的？）问题https://stackoverflow.com/a/31864879/1740079。我将在这里重新发布，因为我也最终在这里寻找答案。
(function () {
angular
.module('app')
.directive('repeatTimes', repeatTimes);
function repeatTimes ($window, $compile) {
return { link: link };
function link (scope, element, attrs) {
var times = scope.$eval(attrs.repeatTimes),
template = element.clone().removeAttr('repeat-times');
$window._(times).times(function (i) {
var _scope = angular.extend(scope.$new(), { '$index': i });
var html = $compile(template.clone())(_scope);
html.insertBefore(element);
});
element.remove();
}
}
})();
... 和 html:
<div repeat-times="4">{{ $index }}</div>
【讨论】：
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 是该位置应出现的星数。
【讨论】：
当我第一次开始使用 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 移到指令中（您可能会编写一次并忘记)。
【讨论】：
我会使用带有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
【讨论】：
你可以写过滤范围：
'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
【讨论】：