Home > Article > Web Front-end > About the implementation of the star rating system of Angularjs rendering using directive
This article mainly introduces the example of the star rating system of the using directive rendered by Angularjs. The editor thinks it is quite good. Now I share it with you and give you a reference. I hope it can help you better master Angularjs.
This article introduces an example of the star rating system of the using directive rendered by Angularjs, and shares it with everyone. The details are as follows:
I tried to create a star rating system that statically uses angularjs/ion with little effect. But currently nothing is output to the screen... Am I doing something wrong?
service.html
<ion-list> <ion-item ng-repeat="business in businessList track by $index" class="item-icon-right"> <h2>{{business.name}}</h2> {{business.distance}} miles <br> <p star-rating rating-value="{{business.rating}}" max="rating.max"></p> <i class="icon ion-chevron-right icon-accessory"></i> </ion-item> </ion-list>
directives.js
angular.module('starter.directives', []) .directive('starRating', function() { return { restrict: 'A', template: '<ul class="rating">' + '<li ng-repeat="star in stars" ng-class="star">' + '\u2605' + '</li>' + '</ul>', scope: { ratingValue: '=', max: '=' }, link: function(scope, elem, attrs) { scope.stars = []; for (var i = 0; i < scope.max; i++) { scope.stars.push({ filled: i < scope.rating }); } } } });
services.js
.service("BusinessData", [function () { var businessData = [ { id: 1, serviceId: 1, name: 'World Center Garage', distance: 0.1, rating: 4 } ]; return { getAllBusinesses: function () { return businessData; }, getSelectedBusiness: function(serviceId) { var businessList = []; serviceId = parseInt(serviceId); for(i=0;i<businessData.length;i++) { if(businessData[i].serviceId === serviceId) { businessList.push(businessData[i]); } } return businessList; } } }])
controller.js
##
.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) { $scope.service = ServicesData.getSelectedService($stateParams.service); $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service); });
Solution 1:
controller. js.controller('ServiceCtrl', function($scope, ServicesData, BusinessData, $stateParams) { $scope.service = ServicesData.getSelectedService($stateParams.service); $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service); $scope.ratings = { current: 5, max: 10 };Kazuya modified service.html
##
<p star-rating rating-value="rating.current" max="rating.max"></p>
The above is the detailed content of About the implementation of the star rating system of Angularjs rendering using directive. For more information, please follow other related articles on the PHP Chinese website!