使用指令渲染星級評分系統

我正在嘗試使用angularjs/ionic創建一個星級評分系統，並且收效甚微。但是目前沒有任何信息輸出到屏幕上......我做錯了什麼？使用指令渲染星級評分系統

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

來源

2016-01-18 methuselah

如果您的控制檯中顯示任何內容，您可以告訴我們嗎？一切正確加載正確嗎？會發生什麼，什麼不會發生？ – Patrick

如果我將'

'替換爲5星以內的{{business.rating}}，那麼我會得到正確的輸出（即在這種情況下是5星中的4個）。我想問題是協調該指令對該值的操縱，並最終輸出service.html – methuselah

你可以請撥弄 –

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>

希望它會幫助你。！

來源

2016-01-18 13:34:11

這是不正確的，因爲作用域上的評級對象是一個列表，而在html代碼中，您引用了一個「評級」對象，您尚未將其添加到控制器中。 – Patrick

這不工作@KunalKakkad。剛剛嘗試過。 – methuselah

嘿，你可以請檢查它，因爲我已經在controller.js中更新了我的答案 –

使用指令渲染星級評分系統

回答

相關問題