未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
本文介绍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>

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Angularjs渲染的 using 指令的星级评分系统示例
本站链接:http://www.codesec.net/view/568407.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(16)