Рейтинг звезды CSS с данными ng-repeat и json с помощью angularjs

хочу показать div N раз в соответствии со значением, полученным от JSON.

объект:

$scope.pro = [
    {
        product: "chicken", 
        rating: 3
    },
    {
        product: "fish", 
        rating: 3
    },
    {
        product: "pizza", 
        rating: 4
    }
];

Если продукт имеет 3 рейтинга означает div нужно показать три раза, как звезды.
Как это сделать в угловой.Яш?

Мой Plunker Демо

6
angularjs angularjs-ng-repeat javascript json

7 ответов

вы можете попробовать это,

JS

$scope.pro = [{product: "chicken", rating: 3},{product: "fish", rating: 3},{product: "pizza", rating: 4}];

var ratingTotal = 5; 

$scope.getRepeater = function() {
   return new Array(ratingTotal);
};

HTML-код

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">

    <div ng-repeat="array in pro">{{array.product}} <span class="star-icon" ng-repeat="r in getRepeater() track by $index" ng-class="{'full': ($index + 1) <= array.rating, 'half': ($index + .5) == array.rating}" ></span></div>

  </body>

</html>

Примечание: имя класса для выбранной звезды упоминается как "полный" и не стесняйтесь изменять это.

4

geNumber() создать пустой массив с размером рейтинга. ng-repeat будет перебирать его независимо от того, что внутри

track by $index необходимо в этом случае, потому что вы будете отображать несколько раз одно и то же значение и дубликаты в ретрансляторе не допускаются 

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.pro = [{
    product: "chicken",
    rating: 3
  }, {
    product: "fish",
    rating: 3
  }, {
    product: "pizza",
    rating: 4
  }];
  
  $scope.getNumber = function(num){
    return new Array(num);
  }  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp" ng-controller="myController">

  <div ng-repeat="item in pro">
    <div ng-repeat="n in getNumber(item.rating) track by $index">
      {{item.product}}
    </div>
  </div>

</body>
3

вы можете создать массив, основанный на рейтинге. Затем повторите над этим массивом:

<div ng-repeat="array in pro">
    {{array.product}} , <span ng-repeat="n in createArray(array.rating) track by $index">X</span>
</div>

в вашем контроллере:

$scope.createArray = function(n){    
    return new Array(n);
}

https://plnkr.co/edit/gUPn6m7Tiu01yksa9VOs?p=preview

3

если вы чувствуете фантазии, вы можете использовать это ЕС6 решение показать x количество *:
Примечание: нет поддержки IE вообще.

JS 

$scope.getAsterisks = rating => Array.from('*'.repeat(parseInt(rating, 10)));

HTML-код 

<span ng-repeat="x in getAsterisks(array.rating) track by $index">{{x}}</span>

Plunker: https://plnkr.co/edit/9H3j3NH9w5xNvqM142Gq?p=preview

информация о функциях ES6:
Array.from (без поддержки в IE) создает массив из строки, каждый символ становится элементом массива.
String.prototype.repeat (нет поддержки в IE и Opera) ... повторяет строку X раз.

1

<div ng-repeat="array in pro">{{array.product}} ,
  <span ng-repeat=" arr in array.rating ">{{arr.j}}</span>
</div>

// код

// Code goes here

var app = angular.module('myApp', []);

app.controller('myController', function($scope) {
  $scope.pro = [{product: "chicken", rating: 3},{product: "fish", rating: 4},{product: "pizza", rating: 6}];
  for(var i=0;i<$scope.pro.length;i++)
  {
     if($scope.pro[i].rating >0)
     {
         $scope[$scope.pro[i].product]=[];
         for(var j=0;j< $scope.pro[i].rating;j++)
         {
            $scope[$scope.pro[i].product].push({j:'*'}); 
         }
         $scope.pro[i].rating = $scope[$scope.pro[i].product];
     }
  }
});
<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">

    <div ng-repeat="array in pro">{{array.product}} ,
      <span ng-repeat=" arr in array.rating ">{{arr.j}}</span>
    </div>
    
  </body>

</html>
1

директива AngularJS ratings:

angular
    .module('myApp', [])
    .directive('ratings', function () {
        return {
            restrict: 'E',
            scope: false,
            template: '<span ng-repeat="x in arrRating track by $index">&#9733;</span>',
            link: function ($scope, $el, $attr) {
                $scope.arrRating = new Array(+$attr.rating);
            }
        };
    })
    .controller('myController', function ($scope) {
        $scope.pro = [{product: "chicken",rating: 3}, {product: "fish",rating: 3}, {product: "pizza",rating: 4}, {product: "steak",rating: 10}];
    });
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="p in pro">
     {{p.product}} <ratings rating="{{p.rating}}"></ratings>
  </div>
</div>
1

лучший способ сделать это-создать звездный компонент с помощью пользовательской директивы, которую также можно повторно использовать во всем угловом приложении, эта директива принимает рейтинг и генерирует количество звезд в DOM.

angular
  .module('demo', [])
  .controller('DefaultController', DefaultController)
  .controller('StarController', StarController)
  .directive('star', star);

function DefaultController() {
  var vm = this;
  vm.products = [{
    product: "chicken",
    rating: 3
  }, {
    product: "fish",
    rating: 4
  }, {
    product: "pizza",
    rating: 5
  }];
}

function star() {
  var directive = {
    restrict: 'E',
    scope: {
      rating: '=',
      max: '='
    },
    link: linkFunc,
    controller: StarController,
    controllerAs: 'star',
    bindToController: true
  };

  return directive;

  function linkFunc(scope, element, attrs, ngModelCtrl) {
    for (var i = 0; i < scope.max; i++) {
      var fillStyle = '';
      if (i < scope.rating) {
        fillStyle = 'fill';
      } else {
        fillStyle = 'empty';
      }

      element.append('<span class="star-icon ' + fillStyle + '">☆</span>');
    }
  }
}

function StarController() {
  var vm = this;
}
ul {
  font-size: 20px;
  list-style-type: none;
  padding: 0;
}
ul li {
  padding: 10px;
}
ul li > span {
  display: inline-block;
  width: 100px;
}
star span {
  margin: 0px 5px;
}
.star-icon {
  color: #ddd;
  font-size: 1.5em;
  position: relative;
  top: 3px;
}
.star-icon.fill:before {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  color: #FDE16D;
  content: '05';
  position: absolute;
  left: 0;
}
.star-icon.empty:before {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.7);
  color: #FFF;
  content: '05';
  position: absolute;
  left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demo">
  <div ng-controller="DefaultController as ctrl">
    <ul>
      <li ng-repeat="product in ctrl.products">
        <span ng-bind="product.product"></span>
        <star rating="product.rating" max="5"></star>
      </li>
    </ul>
  </div>
</div>

звезды вдохновлен https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8

1