About the implementation of the star rating system of Angularjs rendering using directive-JS Tutorial-php.cn

About the implementation of the star rating system of Angularjs rendering using directive

小云云

Release： 2017-12-23 09:58:50

Original

1631 people have browsed it

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>

Copy after login

directives.js

angular.module(&#39;starter.directives&#39;, [])

.directive(&#39;starRating&#39;, function() {
 return {
  restrict: &#39;A&#39;,
  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
    });
   }
  }
 }
});

Copy after login

services.js

.service("BusinessData", [function () {
  var businessData = [
  {
    id: 1,
    serviceId: 1,
    name: &#39;World Center Garage&#39;,
    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;
    }
  }
}])

Copy after login

controller.js

.controller(&#39;ServiceCtrl&#39;, function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
});

Copy after login

Solution 1:

controller. js

.controller(&#39;ServiceCtrl&#39;, function($scope, ServicesData, BusinessData, $stateParams) {
 $scope.service = ServicesData.getSelectedService($stateParams.service);
 $scope.businessList = BusinessData.getSelectedBusiness($stateParams.service);
 $scope.ratings = {
   current: 5,
   max: 10
   };

Copy after login

Kazuya modified service.html

<p star-rating rating-value="rating.current" max="rating.max"></p>

Copy after login

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!