gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:21:12 26 4
gpt4 key购买 nike

我有一个对象数组,所有对象都包含 star_ rating 属性

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

我通过 ng-repeat 在列表中显示这些对象。我想要做的是将对象的星星数与最大星星数 (5) 一起显示,因此列表将如下所示

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 滞后并变得紧张),性能会受到影响,因为这些重复次数会乘以对象数量

对于我当前的方法,是否有更高效的解决方案?

感谢您的任何意见!

最佳答案

   <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
.yellow {
color: #ff0000;
}
.grey {
color: #00ff00;
}
</style>
<body>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.countArr = [0, 1, 2, 3, 4];
$scope.topics = [{ name: 'Chemistry', star_rating: 3 },
{ name: 'Physics', star_rating: 5 }];
});
</script>
<div ng-app="myShoppingList" ng-controller="myCtrl">
<div ng-repeat="topic in topics">
<span ng-bind="topic.name" ></span> ->
<i ng-repeat="i in countArr" ng-class="{'yellow': $index < topic.star_rating, 'grey': $index >= topic.star_rating}">[<span ng-if="$index < topic.star_rating" >*</span>]</i>
</div>
</div>
</body>
</html>

关于javascript - 计算星级 - ng-repeat 的替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52436412/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com