Styl ngClass z myślnikiem w kluczu

165

Mam nadzieję, że dzięki stylom używającym myślników zaoszczędzi to komuś bólu głowy, zwłaszcza że bootstrap stał się tak popularny.

Używam kątowego 1.0.5 w ramach

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>

W dokumentacji ngClass przykład jest prosty, ale wspomina się w nim również, że wyrażenie może być mapą nazw klas na wartości logiczne. Próbowałem użyć stylu „biała ikona” na mojej ikonie, jak pokazano w dokumentacji bootstrap , w zależności od zmiennej boolowskiej.

<i class="icon-home" ng-class="{icon-white: someBooleanValue}">

Powyższa linia nie działa. Do klasy nie jest dołączane stwierdzenie icon-whitekiedy someBooleanValuejest prawdziwe. Jeśli jednak zmienię klucz na iconWhite, zostanie on pomyślnie dodany do listy wartości klas. Jak dodać wartość za pomocą myślnika?

Oszukać
źródło
1
Cześć, witaj w SO! Powinieneś zaktualizować swoje pytanie, aby podzielić je na pytanie i odpowiedź - odpowiedź na własne pytanie jest w porządku i zachęcana, jeśli jest pomocna. W ten sposób możesz zaakceptować swoją odpowiedź, a inne osoby wyszukujące zobaczą, że odpowiedź na pytanie jest pomyślna.
Alex Osborn
Dzięki za Twoją sugestię!
Foo L

Odpowiedzi:

364

Po godzinach hakowania okazuje się, że myślnik jest interpolowany! Cytaty są potrzebne.

<i class="icon-home" ng-class="{'icon-white': someBooleanValue}">

Mam nadzieję, że pomoże to komuś wyrywać włosy.

AKTUALIZACJA:

W starszych wersjach Angulara użycie odwrotnego ukośnika również załatwia sprawę, ale nie w nowszych wersjach.

<i class="icon-home" ng-class="{icon\-white: someBooleanValue}">

Ten pierwszy jest prawdopodobnie preferowany, ponieważ możesz go łatwiej wyszukać w swoim ulubionym edytorze.

Oszukać
źródło
15
Dziękuję Ci za to. Na to też zmarnowałem ZBYT DUŻO czasu.
taudep
2
Dziękuję Ci!!! Wiedziałem, że to się dzieje, ale nie byłem pewien, jak rozwiązać. DZIĘKI!
Mark Ford,
1
Używam AngularJS 1.2.3. U mnie „\ -” nie działa. „''” działał bardzo dobrze.
bobzsj87
1
Zastanawiałem się, dlaczego to nie działa dla mnie, kiedy zdawałem się podążać za innymi przykładami!
nevster
$ scope.someBooleanValue = true
zloctb
11

\'icon-white\' działa również (z AngularJS 1.2.7)

Bromoksyd
źródło
To najlepsza odpowiedź, ponieważ jest najbardziej przyjazna dla przyszłości i kompatybilna wstecz
Eric Steinborn
2
Cześć! @EricSteinborn Jestem z przyszłości, przybyłem tutaj, aby cię ostrzec: to wcale nie jest przyjazne!
Typo
0

alternatywa dla zastosowań ng-class:

    .menu-disabled-true{
color: red;
}
    .menu-disabled-false{
color: green;
}


<div ng-controller="DeathrayMenuController">
<p class=menu-disabled-{{status}}>shanam</p>
 <button ng-click="action()">click me</button>
</div>

<script>



function DeathrayMenuController($scope) {
    $scope.status=true
    $scope.action= function(){
      $scope.status=!$scope.status
    }
}
</script>
zloctb
źródło