All geek questions in one place

CSS Star Rating with ng-repeat and json data using angularjs

You want to show the div n times according to the value received from JSON.

My object:

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

If the product has 3 ratings, then the div should show three times, for example, the rating of stars.
How to do this in angular.js?

My plunker demo

+6
source share
7 answers

Can you try this

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>

Note The class name for the selected star is referred to as “full” and feel free to change this.

+4
source

You can create an array based on rating. Then repeat this array:

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

In your controller:

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

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

+3
source

geNumber() will create an empty array with the size of the rating. ng-repeat will iterate over it no matter what is inside

track by $index necessary in this case, because you will display the same value several times, and duplicates in the repeater are not allowed

 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
source

If you feel weird, you can use this ES6 solution to show x number *:
Note: there is no IE support at all.

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 Features Information:
Array.from (without support in IE) creates an array from a string, each character becomes an element of the array.
String.prototype.repeat (no support in IE and Opera) ... repeats the string X times.

+1
source 

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

// The code goes here

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

The best way to do this is to create a star component using a custom directive, it can also be reused throughout the Angular application, this directive takes a rating and generates the number of stars in the 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: '\2605'; position: absolute; left: 0; } .star-icon.empty:before { text-shadow: 0 0 1px rgba(0, 0, 0, 0.7); color: #FFF; content: '\2605'; 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>

Star rating based on https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8

+1
source

AngularJS directive 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
source

Source: https://habr.com/ru/post/1012027/

More articles:


All Articles