CODEWITHSUNDEEP
angularjsionic-frameworksassaddclass
Kai Keanaaina
Kai Keanaaina

Reputation: 73

How can I add a style to specific items in my ng-repeat list?

I am using Ionic which is using Angular.js

My html page has a ng-init which calls a function from my controller. the function hits a service which goes to the database to retrieve all the songs. 

    $scope.getAllSongs = function(){  
      songService.getAllSongs()  
      .success(function(data){
         //the data is an array of songs
         //songs get organize by being pushed to other arrays the html page uses

       **//for loop
         // if(x[i].visibility === false
           //change the background color to red **
       }
    })

On the html file, I use ng-repeat to show the items in the specific array like so.

 <ion-item ng-repeat="song in ASongs | orderBy:'title'">
    <div class="row responsive-sm">
       <div>
          <a>
            <h2>{{song.title}}</h2>
          </a>
       </div>
    </div>
 </ion-item>

the songs in the ASongs array all have a property called "visibility" which is a boolean. ng-repeat will display the list of items in the ASongs Array. Now I'm trying to figure out how to change the background color of all the songs with a visibility that are false.

Upvotes: 0

Views: 787

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

You can use ngClass directive.

CSS : 

.background-with-false {
   background-color : your-color;
}

HTML :

<div ng-class"{ 'background-with-false' : song.visibility === false }" class="row responsive-sm">
       <div>
          <a>
            <h2>{{ song.title }}</h2>
          </a>
       </div>
</div>

You can also ngStyle

Upvotes: 4

Related Questions