提问者:小点点

角度重复<span>n次


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

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

ng-repeat似乎没有被指示,因为它正在处理集合。
任何建议(angular newbie)


共3个答案

匿名用户

我将对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;
  };
});

演示小提琴

匿名用户

(在您的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是应该出现在此位置的星星数。

匿名用户

您可以写入筛选器范围:

'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