Javascript 计算星级-ng repeat的替代方案

我有一个对象数组，所有对象都包含一个

star\u rating

属性

[{ name: 'Chemistry', star_rating: 3 },
 { name: 'Physics', star_rating: 5 }]

我通过

ng repeat

在列表中显示这些对象。我想做的是在最大星星数旁边显示一个对象的星星数，因此列表将如下所示

Chemistry [*][*][*][ ][ ]
Physics   [*][*][*][*][*]

我有一个现有的解决方案，可以计算并显示

<i ng-repeat="i in [].constructor(topic.star_rating) track by $index" class="yellow"></i>
<i ng-repeat="i in [].constructor(5 - topic.star_rating) track by $index" class="grey"></i>

这对于小数组来说效果很好，但是当列表增长时（UI滞后&变得不稳定），会影响性能，因为这些重复会乘以对象的#

我目前的方法是否有更有效的解决方案

---

谢谢你的意见

创建以下五个选项。我只展示了两个用于演示目的

<div ng-if="topic.star_rating === 1">
<i class="yellow"></i>
<i class="grey"></i>
<i class="grey"></i>
<i class="grey"></i>
<i class="grey"></i>
</div>

<div ng-if="topic.star_rating === 2">
<i class="yellow"></i>
<i class="yellow"></i>
<i class="grey"></i>
<i class="grey"></i>
<i class="grey"></i>
</div>

---

这将解决您的问题。

创建以下五个选项。我只展示了两个用于演示目的

<div ng-if="topic.star_rating === 1">
<i class="yellow"></i>
<i class="grey"></i>
<i class="grey"></i>
<i class="grey"></i>
<i class="grey"></i>
</div>

<div ng-if="topic.star_rating === 2">
<i class="yellow"></i>
<i class="yellow"></i>
<i class="grey"></i>
<i class="grey"></i>
<i class="grey"></i>
</div>

这将解决您的问题。

黄先生{
颜色：#ff0000；
}
格雷先生{
颜色：#00ff00；
}
var app=angular.module（“myShoppingList”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.countArr=[0,1,2,3,4]；
$scope.topics=[{名称：“化学”，星级：3}，
{名称：“物理学”，星级：5}]；
});
->
[*]

黄先生{
颜色：#ff0000；
}
格雷先生{
颜色：#00ff00；
}
var app=angular.module（“myShoppingList”，[]）；
app.controller（“myCtrl”，函数（$scope）{
$scope.countArr=[0,1,2,3,4]；
$scope.topics=[{名称：“化学”，星级：3}，
{名称：“物理学”，星级：5}]；
});
->
[*]

谢谢你的建议！这确实是一个简单的解决方案，但似乎有很多重复的代码。另外，如果检查列表中返回的每个对象，这将添加5个

ng，不确定这是否是最佳的？重复代码只包含静态html，这显然比每次使用ng repeat要快得多。此外，ng if将从DOM中删除“not required”元素。在你的问题上试一试，应该行得通。你说得对！这可能是最快的方法，因为没有迭代运行，只有DOM操作。我接受这个答案，因为它是性能方面最好的解决方案。无论我使用的是
ng repeat
I的实现，它似乎都会导致应用程序在冗长的列表中滚动时出现一些延迟，但您的解决方案（尽管是冗余的）提供了平滑的滚动体验，并且脚本更少！。非常感谢。谢谢你的建议！这确实是一个简单的解决方案，但似乎有很多重复的代码。另外，如果

检查列表中返回的每个对象，这将添加5个

ng，不确定这是否是最佳的？重复代码只包含静态html，这显然比每次使用ng repeat要快得多。此外，ng if将从DOM中删除“not required”元素。在你的问题上试一试，应该行得通。你说得对！这可能是最快的方法，因为没有迭代运行，只有DOM操作。我接受这个答案，因为它是性能方面最好的解决方案。无论我使用的是
ng repeat
I的实现，它似乎都会导致应用程序在冗长的列表中滚动时出现一些延迟，但您的解决方案（尽管是冗余的）提供了平滑的滚动体验，并且脚本更少！。非常感谢。谢谢@Bhuwan，我可以将您的方法与我的构造函数方法结合起来，这样就不需要在控制器中定义
countArr
谢谢@Bhuwan，我可以将您的方法与我的构造函数方法结合起来，这样就不需要在控制器中定义
countArr
<代码>