如何为我的 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>

A​​Songs 数组中的歌曲都有一个名为 "visibility" 的 属性，它是一个布尔值。 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