本文主要介绍了angularjs渲染的 using 指令的星级评分系统示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考，希望能帮助到大家更好的掌握angularjs。
本文介绍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>
<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: '<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
<p star-rating rating-value="rating.current" max="rating.max"></p>
相关推荐：
js完成星级评分功能的实例详解
基于jquery的星级评分插件_jquery
用css制作星级评分_经验交流
以上就是关于angularjs渲染 using 指令的星级评分系统的实现的详细内容。