JavaScript

超轻量级php框架startmvc

Angularjs渲染的 using 指令的星级评分系统示例

更新时间:2020-06-14 19:00 作者:startmvc
本文介绍Angularjs渲染的using指令的星级评分系统示例,分享给大家,具体如下:我试图创建

本文介绍Angularjs渲染的 using 指令的星级评分系统示例,分享给大家,具体如下: 我试图创建静态使用 angularjs/离子成效甚微的星级评分系统。但目前什么都不输出到屏幕上......我是我做错了吗?

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。