2016-08-23 1 views
0

Ich verwende Ionic, die Angular.js verwendetWie kann ich bestimmten Artikeln in meiner ng-Wiederholungsliste einen Stil hinzufügen?

Meine HTML-Seite hat eine ng-init, die eine Funktion von meinem Controller aufruft. Die Funktion trifft einen Dienst, der zur Datenbank geht, um alle Lieder abzurufen.

In der HTML-Datei verwende ich ng-repeat, um die Elemente in dem spezifischen Array so zu zeigen.

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

die Songs in der ASongs Array verfügen alle über eine Eigenschaft "Sichtbarkeit" genannt, was ein boolean ist. ng-repeat zeigt die Liste der Elemente im ASongs-Array an. Jetzt versuche ich herauszufinden, wie man die Hintergrundfarbe aller Songs mit einer falschen Sichtbarkeit ändert.

+0

Sie können ng-Stil ng-style = "Ausdruck" verwenden. https://docs.angularjs.org/api/ng/directive/ngStyle –

+0

versuche mit 'ng-class = "{background_color: song.visibility === false}" ', hier' background_color' ist die css-Klasse –

Antwort

4

Sie können ngClass Richtlinie verwenden.

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> 

können Sie auch ngStyle

Verwandte Themen