Javascript Ng-重复整数值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28125304/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ng-repeat on integer value
提问by Chrillewoodz
I'm trying to use ng-repeaton a divwhich should contain a star image, each pie in the JSON has a ratingproperty from 1-5, and I want to use this value to loop out x number of stars. I've got this working somewhat but it's flawed in the way that I can't re-sort the array and make the stars follow the correct item in the list since I'm using [$index]to track the iteration.
我想用ng-repeat在div它应该包含一个星图，在每个JSON饼有rating1-5财产，我想用这个值环出的星x个。我已经开始工作了，但它的缺陷在于我无法重新排序数组并使星星跟随列表中的正确项目，因为我正在使用它[$index]来跟踪迭代。
My solution is rather ugly as well since I'm creating arrays with as many index placeholders as the value of the ratingproperty, and then pushing this into an array to loop out the appropriate number of images. I would like to have a more elegant solution.
我的解决方案也相当丑陋，因为我创建的数组具有与rating属性值一样多的索引占位符，然后将其推入数组以循环出适当数量的图像。我想要一个更优雅的解决方案。
How should I go about this problem without using [$index]?
我应该如何在不使用的情况下解决这个问题[$index]？
Snippet of the JSON:
JSON 片段：
{"pies": [
...
{
"name": "Blueberry pie",
"imageUrl": "img/blueberrypie.png",
"id": "1",
"rating": "5", //Ng-repeat depending on this value
"description": "Blueberry pie is amazing."
},
...
]}
My controller:
我的控制器：
pieShopApp.controller('shopCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
$scope.pieId = $routeParams.pieId,
$scope.sortingOptions = ['A-Z', 'Rating'],
$scope.sortingValues = ['name', 'rating'],
$scope.ratings = [],
$http.get('jsons/pies.json')
.success(function(data, status) {
$scope.pies = data;
for (i = 0; i < $scope.pies.pies.length; i++) {
switch ($scope.pies.pies[i].rating) {
case "1": $scope.ratings.push(["1"]); break;
case "2": $scope.ratings.push(["1", "2"]); break;
case "3": $scope.ratings.push(["1", "2", "3"]); break;
case "4": $scope.ratings.push(["1", "2", "3", "4"]); break;
case "5": $scope.ratings.push(["1", "2", "3", "4", "5"]); break;
}
}
console.log($scope.ratings);
})
.error(function(status) {
console.log(status);
})
}]);
The list which contains the pie items:
包含饼图项的列表：
<div id="pie-list-wrapper">
<ul class="nav">
<a href="#/pies/pieid" ng-repeat="pie in pies.pies | filter:query | orderBy:orderProp">
<li class="list-item rounded-corners box-shadow">
<aside>
<img src="{{pie.imageUrl}}" no-repeat alt="Image of the pie">
</aside>
<header>
<h1 ng-bind="pie.name" id="item-name" class="bold-text"></h1>
</header>
<article>
<span ng-bind="pie.description" id="item-desc"></span>
</article>
<footer id="item-rating">
<div ng-repeat="rating in ratings[$index]" class="rating-box"></div> //Contains the stars
</footer>
</li>
</a>
</ul>
</div>
Outcome:
结果：
采纳答案by dhavalcengg
Checkout this
结帐这个
<div ng-app='myApp' ng-controller="Main">
<span ng-repeat="n in range('5')">Start{{$index}} </span>
</div>
$scope.range = function(count){
var ratings = [];
for (var i = 0; i < count; i++) {
ratings.push(i)
}
return ratings;
}
Change your html to following
将您的 html 更改为以下内容
<div id="pie-list-wrapper">
<ul class="nav">
<a href="#/pies/pieid" ng-repeat="pie in pies.pies | filter:query | orderBy:orderProp">
<li class="list-item rounded-corners box-shadow">
<aside>
<img src="{{pie.imageUrl}}" no-repeat alt="Image of the pie">
</aside>
<header>
<h1 ng-bind="pie.name" id="item-name" class="bold-text"></h1>
</header>
<article>
<span ng-bind="pie.description" id="item-desc"></span>
</article>
<footer id="item-rating">
<div ng-repeat="start in range(pie.rating)" class="rating-box"></div> //Contains the stars
</footer>
</li>
</a>
</ul>
</div>
回答by Sebas Palacio Florez
I solved this in this way: "items" is your array of objects in the $scope, accesing the property "rating", you can show the star if the value is less or the same comparing to the "rating" property.
我以这种方式解决了这个问题：“items”是您在 $scope 中的对象数组，访问属性“rating”，如果与“rating”属性相比，该值较小或相同，则可以显示星号。
In this example I'm using some icon fonts but for the case of an image is the same thing.
在这个例子中，我使用了一些图标字体，但对于图像来说是一样的。
<div ng-repeat="item in items">
<div class="item-offers"">
<img ng-src="{{item.image}}">
<div class="item-not-rating">
<i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 1"></i>
<i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 2"></i>
<i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 3"></i>
<i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 4"></i>
<i class="icon ion-ios-star icon-rating" ng-if="item.rate >= 5"></i>
</div>
</div>
</div>
I've found a better solution that solves this requirement at all:
我找到了一个更好的解决方案来解决这个要求：
回答by Camusensei
It looks like you are iterating on the piesand that's where the $indexgets its value from.
Instead of ng-repeat="rating in ratings[$index]"you should use ng-repeat="rating in range(pie.rating)"This way, the rating would follow your pie when ordering.
Then you could completely remove the loop in the controller.
看起来您正在迭代pies，这就是从那里$index获取价值的地方。而不是ng-repeat="rating in ratings[$index]"您应该使用ng-repeat="rating in range(pie.rating)"这种方式，订购时评级将跟随您的馅饼。然后你可以完全删除控制器中的循环。
Could you provide just a bit more HTML so that we could see where the $indexcomes from?
你能提供更多的 HTML 以便我们可以看到它的$index来源吗？
Regards, Camusensei
问候， Camusensei
EDIT:
You are indeed iterating over pies.piesin
ng-repeat="pie in pies.pies | filter:query | orderBy:orderProp"So what I wrote earlier should work. See below for exhaustive changes.
编辑：您确实迭代pies.pies中
ng-repeat="pie in pies.pies | filter:query | orderBy:orderProp"那么我前面写的应该工作。有关详尽的更改，请参见下文。
Controller:
控制器：
$http.get('jsons/pies.json')
.success(function(data, status) {
$scope.pies = data;
})
.error(function(status) {
console.log(status);
})
HTML:
HTML:
<div ng-repeat="rating in range(pie.rating)" class="rating-box"></div>
EDIT2: Sorry, I forgot the range function (inspired from Ariya Hidayat):
EDIT2：抱歉，我忘记了 range 函数（灵感来自Ariya Hidayat）：
$scope.range = function(count){
return Array.apply(0, Array(+count));
}
回答by Ba5t14n
The problem is that ng-repeatonly works with arrays or objects, so you can't say iterate x times (while x is a number)
问题是ng-repeat只适用于数组或对象，所以你不能说迭代 x 次（而 x 是一个数字）
A solution could be to write a function in JavaScript:
一个解决方案可能是用 JavaScript 编写一个函数：
$scope.getNumber = function(num) {
return (new Array(num));
}
An then use this html to show the stars without $index:
然后使用此 html 显示没有 $index 的星星：
<div ng-repeat="rating in getNumber(pie.rating)"></div>
回答by will.ogden
In Angular 1.4+ you get the following error when using an empty array:
在 Angular 1.4+ 中，使用空数组时会出现以下错误：
Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed.
错误：[ngRepeat:dupes] 不允许在转发器中重复。
The following works:
以下工作：
$scope.range = function(count) {
return Array.apply(0, Array(+count)).map(function(value,index){
return index;
});
}
<div ng-app='myApp' ng-controller="Main">
<span ng-repeat="n in range(5)">Start{{$index}} </span>
</div>
