Über die Implementierung des Sternebewertungssystems von Angularjs Rendering unter Verwendung der Direktive

In diesem Artikel wird hauptsächlich das von Angularjs gerenderte Sternebewertungssystem vorgestellt. Der Herausgeber findet es recht gut. Ich hoffe, es kann Ihnen helfen, es besser zu beherrschen Angularjs.

In diesem Artikel wird ein Beispiel für das Sternebewertungssystem der von Angularjs gerenderten Using-Anweisung vorgestellt und mit allen geteilt. Die Details lauten wie folgt:
Ich habe versucht, ein Sternebewertungssystem zu erstellen, das statisch verwendet wird anglejs/ion mit geringer Wirkung. Aber aktuell wird nichts auf dem Bildschirm ausgegeben... Mache ich etwas falsch?

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: &#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
    });
   }
  }
 }
});

Dienste. 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);
});

Lösung 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>

Verwandt Empfehlungen:

Detaillierte Beispiele für JS zur Vervollständigung der Sternebewertungsfunktion

JQuery-basiertes Sternebewertungs-Plug-in_jquery

Verwenden Sie CSS, um Sternebewertungen zu erstellen_Erfahrungsaustausch

Das obige ist der detaillierte Inhalt vonÜber die Implementierung des Sternebewertungssystems von Angularjs Rendering unter Verwendung der Direktive. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!