我正在我的离子应用中实施评级功能。我创建了图标字体,所以我可以将星星显示为类。 我想使用ngclass指令有条件地设置类基于评级的内容。
我的问题:我的逻辑和语法是否正确?
/ * MODEL * /
$scope.items = [{id: 1, name: 'foo', rating: 3 },{id: 2, name:'bar', rating: 4}]
...
/ * CONTROLLER * /
$scope.checkRating = function(rating) {
if (rating === 1){ return 'one-star' }
else if (rating === 2){ return 'two-star' }
else if (rating === 3){ return 'three-star' }
else if (rating === 4){ return 'four-star' }
else if (rating === 5){ return 'five-star' }
}
...
/ * VIEW * /
<ion-list>
<ion-item ng-repeat="item in items">
<h2>{{item.name}}</h2>
<p><span ng-class="checkRating(item.rating)"></span><p>
</ion-item>
</ion-list>
答案 0 :(得分:1)
$scope
语法。而是使用controllerAs
。
此外,John Papa's style guide是良好实践的良好来源,您可以从中学到很多东西。
如果您是AngularJS的新手,我建议您阅读Todd Motto的AngularJS Tutorial: A Comprehensive 10,000 Word Guide - 非常值得一读。
答案 1 :(得分:0)
我宁愿在JSON
<强>标记强>
<ion-list>
<ion-item ng-repeat="item in items">
<h2>{{item.name}}</h2>
<p><span ng-class="item.class"></span><p>
</ion-item>
</ion-list>
<强>代码强>
$scope.items = [{id: 1, name: 'foo', rating: 3, class: 'one-star' },
{id: 2, name:'bar', rating: 4, class: 'two-star'}] ;
或强>
创建一个数组,其中包含rating和id的映射,并在html上使用它。
<强> HTML 强>
<p><span ng-class="$scope.ratings[item.rating]"></span><p>
<强>标记强>
$scope.ratings = {
"1":'one-star',
"2":'two-star',
"3":'three-star',
"4":'four-star',
"5":'five-star'
}