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

Question

i'm implementing a rating feature in my ionic app. i created icon fonts so i could display the the stars as classes. I want to use the ngclass directive to conditionally set what the class is based on the rating.

for my question: Is my Logic and Syntax correct??

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

if it works it works. I know that seems like a useless answer, but to me this looks like it would work — Sir Neuman
– Sir Neuman, Commented Jun 16, 2015 at 18:41
thanks.. @SirNeuman i'm an angular newbie so i'm always unsure :) — teddybear123
– teddybear123, Commented Jun 16, 2015 at 18:45
Than check AngularJS Tutorial: A Comprehensive 10,000 Word Guide from my updated answer. — bpiec
– bpiec, Commented Jun 16, 2015 at 19:19

bpiec · Accepted Answer · 2015-06-16 19:19:03Z

1

pankajparkar's answer is good but please consider following Angular JS best practices and avoid $scope syntax. Instead use controllerAs.

Also, John Papa's style guide is a very good source of good practices and you can learn much from it.

If you are new to AngularJS than I also recommend you to read AngularJS Tutorial: A Comprehensive 10,000 Word Guide by Todd Motto ‒ really worth to read.

edited Jun 16, 2015 at 19:19

answered Jun 16, 2015 at 18:46

bpiec

1,6413 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2015-06-16 18:45:11Z

0

Rather than making conditional logic, I'd prefer to add class in JSON

Markup

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

Code

$scope.items = [{id: 1, name: 'foo', rating: 3, class: 'one-star' },
              {id: 2, name:'bar', rating: 4, class: 'two-star'}] ;

OR

Create a array with having the mapping of rating and ids and use it on html.

HTML

<p><span ng-class="$scope.ratings[item.rating]"></span><p>

Markup

$scope.ratings = {
    "1":'one-star',
    "2":'two-star',
    "3":'three-star',
    "4":'four-star',
    "5":'five-star'  
}

edited Jun 16, 2015 at 18:45

answered Jun 16, 2015 at 18:37

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

2 Comments

teddybear123 Over a year ago

thanks, but i'll pull up the data from a rest api.. but i get your point

Pankaj Parkar Over a year ago

@teddybear123 are you looking for something more...I think its better to accept one of our answer..what are you waiting for?

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related