Как добавить стиль к определенным элементам в списке ng-repeat?

Question

Я использую Ionic, который использует Angular.js

На моей странице html есть ng-init, который вызывает функцию от моего контроллера. функция обращается к службе, которая поступает в базу данных для извлечения всех песен.

$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 ** 
     } 
    }) 

В html-файле я использую ng-repeat для отображения элементов в определенном массиве, например, так.

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

песни в массиве ASongs все имеют свойство «видимость», которая является логическим. ng-repeat отобразит список элементов в массиве ASongs. Теперь я пытаюсь понять, как изменить цвет фона всех песен с видимостью, которая является ложной.

Answer 1

Вы можете использовать директиву ngClass.

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> 

Вы можете также ngStyle