ng-repeatリスト内の特定のアイテムにスタイルを追加するにはどうすればよいですか？

Question

Angular.jsを使用しているIonicを使用しています

私の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を使用して特定の配列の項目を表示します。 ASongs配列の

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

曲すべてがブール値である「可視性」と呼ばれる性質を持っています。 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