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来显示特定数组中的项目。

 <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数组中的歌曲都有一个名为＆＃34; visibility＆＃34;这是一个布尔值。 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

如何在ng-repeat列表中的特定项目中添加样式？

1 个答案: