AngularJS使用ng-class中的函数来有条件地设置类

时间:2015-06-16 18:32:35

标签: angularjs ionic-framework ionic ng-class

我正在我的离子应用中实施评级功能。我创建了图标字体,所以我可以将星星显示为类。 我想使用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>

2 个答案:

答案 0 :(得分:1)

pankajparkar的答案很好,但请考虑遵循Angular JS最佳做法并避免使用$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'  
}