Angular Js łączą stałą klasę ng z wyrażeniem w tym samym tagu?

mam tag:Angular Js łączą stałą klasę ng z wyrażeniem w tym samym tagu?

<body ng-cloak class="foobar" ng-class="{'fixed-header': settings.isFixed}">

W innym podobnym projekcie mam podobny:

<body ng-cloak class="foobar" ng-class="routeClassName">

Jak mogę zastosować zarówno klasa warunkowy routeClassNamei?

Próbowałem

<body ng-cloak class="foobar" ng-class="{'routeClassName','fixed-header': settings.isFixed}">

i podobny, ale zgłasza błąd. Więc myślę, że moje składnia jest wyłączony ....

Źródło

2014-04-22 Steve

rodzaj hacky, ale '' mógł pracować – SnareHanger

Ah. Wydaje się dziwne, że musiałbym je oba warunkowe. – Steve

Całkowicie się zgadzam, ale wydaje się, że jest to Sposób, aby to zrobić. – SnareHanger

Oto dwa sposoby, aby tego dokonać:

Pierwsza istota, tylko mają kanciasty interpolować wartość, ponieważ jest to po prostu ciąg nazwa klasy w każdym razie, a następnie użyć ngClass dla Twój warunkowy:

<body ng-cloak class="foobar {{routeClassName}}" ng-class="{'fixed-header': settings.isFixed}">

Druga istota, użyj prawdziwe w rachunku wypróbowaniu:

<body ng-cloak class="foobar" ng-class="{'routeClassName': true, 'fixed-header': settings.isFixed}">

ja skłaniam się ku pierwszej opcji od ngClass jest przeznaczona dla klas warunkowych na podstawie wyrażeń.

Źródło

2014-04-22 19:24:18 DRiFTy

"routeClassName": true -> jest to całkowicie błędne. W tym przypadku dosłownie otrzymasz nazwę trasy, która jest prawdopodobnie bezużyteczna. Nie jest to interpretowane jako zmienna kątowa. – downhand

@downhand Pierwszy przykład wykorzystuje zmienną scope do interpolacji wartości zmiennej w twoim zasięgu i używa jej jako nazwy klasy. Drugi przykład to literalny ciąg nazwy klasy. Jest to pożądane zachowanie (oczywiście musiałbyś zamienić nazwę na własny scenariusz). – DRiFTy

Cała kwestia tego pytania jest taka, że nie znasz nazwy, jest ona w zmiennej, w przeciwnym razie po prostu umieścisz ją w klasie, po co zawracasz sobie głowę ng-class. – downhand

Lepszym rozwiązaniem ostatnich wersji kątowa (począwszy 1.4.0 ewentualnie wcześniej) jest dodanie dodatkowej klasy poprzez zapis matrycy ng klasy:

<body class="foobar" 
     ng-class="[{'fixed-header': settings.isFixed}, routeClassName]">

Przykład robocze:

angular.module('test',[]);

.blue{ 
 
background: blue; 
 
} 
 

 
.red { 
 
    border: 10px solid red; 
 
    
 
} 
 

 
.green{ 
 
    border: 10px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script> 
 

 
<body ng-app="test" 
 
     ng-class="[{'blue': boolVar}, strVar]"> 
 

 

 
    <button type="button" 
 
      ng-click="boolVar=!boolVar;">Toggle Bool ({{boolVar}})</button> 
 
    
 
    <input type="text" 
 
     ng-init="strVar='green';" 
 
     ng-model="strVar"> 
 
</body>

Źródło

2016-07-19 16:23:06

Najnowsze w jakiej wersji? – Steve

@Steve: Testowałem go z kątową wersją 1.4.0, ale może również działać z jedną z późniejszych wersji 1.3er. –

można użyć potrójny oświadczenie i ciąg konkatenacji, aby uzyskać pożądany efekt:

<body ng-cloak class="foobar" ng-class="(settings.isFixed ? 'fixed-header ' : '') + routeClassName">

Upewnij się dodać przestrzeń po warunkowym nazwą klasy więc konkatenacji działa prawidłowo.

Źródło

2017-08-08 17:02:51 misterjingles

Angular Js łączą stałą klasę ng z wyrażeniem w tym samym tagu?

Odpowiedz

Powiązane problemy