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

Question

我正在我的 ionic 应用程序中实现评级功能。我创建了图标字体，所以我可以将星星显示为 classes。我想使用 ngclass 指令根据评分有条件地设置 class 的内容。

对于我的问题：我的逻辑和语法是否正确？？

/*型号*/

$scope.items = [{id: 1, name: 'foo', rating: 3 },{id: 2, name:'bar', rating: 4}]

...

/* 控制器 */

$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' }        

}

...

/* 视图 */

<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>

Answer 1

与其制作条件逻辑，我更愿意在 JSON

中添加 class

标记

<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'}] ;

或

创建一个具有评级和 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'  
}

Answer 2

pankajparkar 的回答很好，但请考虑遵循 Angular JS 最佳实践并避免使用 $scope 语法。而是使用 controllerAs.

另外，John Papa's style guide 是很好的实践来源，您可以从中学到很多东西。

如果您是 AngularJS 的新手，那么我也建议您阅读 Todd Motto 的 AngularJS Tutorial: A Comprehensive 10,000 Word Guide——真的值得一读。

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

AngularJS using a function in ng-class to conditionally set classes

angularjs

ionic-framework

ionic

ng-class