Вычисление звездного рейтинга - альтернатива ng-repeat - PullRequest
Новая
       2

Вычисление звездного рейтинга - альтернатива ng-repeat

0 голосов
/ 21 сентября 2018

У меня есть массив объектов, которые содержат свойство 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>

Это отлично работает для небольших массивов, но при увеличении списка (если пользовательский интерфейс запаздывает и становится нервным) наблюдается снижение производительности, так как эти повторы умножаются на количество объектов

Есть либолее эффективное решение для моего текущего метода?

Спасибо за любой вклад!

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018 

   <!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>
0 голосов
/ 21 сентября 2018

Создайте пять вариантов, как показано ниже.Я показываю только два в демонстрационных целях. 

<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>

Это должно решить вашу проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...