Angularjs渲染的 using 指令的星級(jí)評(píng)分系統(tǒng)示例
本文介紹Angularjs渲染的 using 指令的星級(jí)評(píng)分系統(tǒng)示例,分享給大家,具體如下:
我試圖創(chuàng)建靜態(tài)使用 angularjs/離子成效甚微的星級(jí)評(píng)分系統(tǒng)。但目前什么都不輸出到屏幕上......我是我做錯(cuò)了嗎?
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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法
在AngularJS中,有時(shí)候需要監(jiān)視Scope中的某個(gè)變量,因?yàn)樽兞康母淖儠?huì)影響一些界面元素的顯示,接下來(lái)通過(guò)本文給大家介紹AngularJS中監(jiān)視Scope變量以及外部調(diào)用Scope方法,需要的朋友參考下吧2016-01-01
AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn)
本篇文章主要介紹了AngularJS $http模塊POST請(qǐng)求實(shí)現(xiàn),這里整理了詳細(xì)的代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
在 Angular-cli 中使用 simple-mock 實(shí)現(xiàn)前端開發(fā) API Mock 接口數(shù)據(jù)模擬功能的方法
這篇文章主要介紹了在 Angular-cli 中使用 simple-mock 實(shí)現(xiàn)前端開發(fā) API Mock 接口數(shù)據(jù)模擬功能的方法,需要的朋友可以參考下2018-11-11
AngularJS使用ng-options指令實(shí)現(xiàn)下拉框
這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果,ng-option指令使用也很簡(jiǎn)單,下文具體給大家說(shuō)明,對(duì)angularjs 下拉框知識(shí)感興趣的朋友一起看下吧2016-08-08
Angularjs+bootstrap+table多選(全選)支持單擊行選中實(shí)現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選(全選)支持單擊行選中實(shí)現(xiàn)編輯、刪除功能,需要的朋友可以參考下2017-03-03
詳解在AngularJS的controller外部直接獲取$scope
本篇文章主要介紹了詳解在AngularJS的controller外部直接獲取$scope ,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
angularjs獲取到My97DatePicker選中的值方法
今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
詳細(xì)AngularJs4的圖片剪裁組件的實(shí)例
本篇文章主要介紹了詳細(xì)AngularJs4的圖片剪裁組件的實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
深入淺析AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)
這篇文章主要介紹了AngularJS中的一次性數(shù)據(jù)綁定 (bindonce)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05

