本文介紹Angularjs渲染的 using 指令的星級評分系統(tǒng)示例，分享給大家，具體如下：
我試圖創(chuàng)建靜態(tài)使用 angularjs/離子成效甚微的星級評分系統(tǒng)。但目前什么都不輸出到屏幕上......我是我做錯(cuò)了嗎？

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>   <div star-rating rating-value="{{business.rating}}" max="rating.max"></div>   <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);});

解決方法 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   };

和也修改service.html

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持錯(cuò)新站長站。