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 id="business-name">{{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: &#39;<ul class="rating">&#39; +
   &#39;<li ng-repeat="star in stars" ng-class="star">&#39; +
   &#39;\u2605&#39; +
   &#39;</li>&#39; +
   &#39;</ul>&#39;,
  scope: {
   ratingValue: &#39;=&#39;,
   max: &#39;=&#39;
  },
  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>

Related recommendations:

Detailed example of JS completing the star rating function

JQuery-based star rating plug-in_jquery

Use css to create stars Level Rating_Experience Exchange

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!