javascript - 在 Angularjs 中重复给定数字的多个元素

Question

我将以下对象绑定(bind)到我的 Angularjs 应用程序的 $scope

{name: 'Vampire Cafe', rating: 4, review: "Food was good, cafe was a bit dark..."}

我想获取 rating 的值，并在我的 DOM 上重复一些图标元素，总计该值

给定上面的对象，该元素将重复 4 次，DOM 将如下所示:

<h3>Rating</h3>
<i class="icon-ios-star"></i>
<i class="icon-ios-star"></i>
<i class="icon-ios-star"></i>
<i class="icon-ios-star"></i>

我怎样才能用一个简单的 Angularjs 表达式来做到这一点？

Answer 1

目前，ng-repeat 只接受一个集合作为参数，但您可以这样做:

<ul>
    <li ng-repeat="i in getNumber(number) track by $index"><span>{{$index+1}}</span></li>
</ul>

在你的 Controller 中的某处:

$scope.number = 5;
$scope.getNumber = function(num) {
    return new Array(num);   
}

这将允许您根据需要将 $scope.number 更改为任何数字，并且仍然保持您正在寻找的绑定(bind)。

Here is a fiddle有几个列表使用相同的 getNumber 函数。