지시문을 사용한 Angularjs 렌더링의 별점 시스템 구현에 대해

이 글은 주로 Angularjs가 렌더링한 using 지시문의 별표 평가 시스템의 예를 소개합니다. 편집자는 이것이 꽤 좋다고 생각하며 여러분에게 Angularjs를 더 잘 익히는 데 도움이 되기를 바랍니다.

이 글에서는 Angularjs에서 렌더링한 using 지시문의 별표 평가 시스템의 예를 소개하고 모든 사람과 공유합니다. 자세한 내용은 다음과 같습니다.
저는 거의 효과가 없는 각도 js/ion을 정적으로 사용하는 별표 평가 시스템을 만들어 보았습니다. . 그런데 현재 화면에는 아무 것도 출력되지 않고 있는데... 제가 뭔가 잘못하고 있는 걸까요?

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

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

Kazuya 수정 service.html

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

관련 추천:

JS 별점 기능 완성 상세 예시

jQuery 기반 별점 플러그인_jquery

사용 CSS를 별점 만들기_체험교류

위 내용은 지시문을 사용한 Angularjs 렌더링의 별점 시스템 구현에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!