Vorrei impostare in modo condizionale la classe di un elemento in base allo stato dell'applicazione (utilizzando AngularUI Router). Ho provato questo, ma non funziona:Impostare condizionatamente la classe ng di Angular in base allo stato
<li ng-class="{active: $state.current.name === 'state1'}">State 1</li>
<li ng-class="{active: $state.current.name === 'state2'}">State 2</li>
Qualche idea?
La ragione per cui non ha funzionato era perché, come ha sottolineato @charlietfl, $ stato non era in ambito. Quindi ho aggiunto quanto segue al controller del mio stato:
$rootScope.$state = $state;
e ha funzionato benissimo. This plunker è un esempio funzionante.
c'è un avvertimento per questo approccio? – Martian2049
si può fare qualcosa di simile:
<li ng-class="{active: $state.includes('state1')}">State 1</li>
<li ng-class="{active: $state.includes('state2')}">State 2</li>
Ciao Posso sapere il motivo del downgrade della risposta? – V31
non è possibile l'utente '$ stato' in html – Vipul
@Vipul: È nella documentazione di ui-router da utilizzare in questo modo. prova questo link https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stateincludesstatename--params – V31
Si potrebbe anche usare la direttiva ui-sref-active.
per aggiungere la classe active al vostro elemento quando le partite di stato ui-router utilizzano
ui-sref-active="active"
vedi: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active
ma puoi impostare il valore di stato? – Martian2049
Penso che questo approccio sia limitato a quando usi ui-sref giusto? – Martian2049
è '$ state' nella vostra portata? – charlietfl
questa è un'espressione valida, quindi il tuo problema è qualcos'altro, non quel modello specifico. – mpm
charlietfl inchiodato. Questo plunker mi ha aiutato a capirlo: http://plnkr.co/edit/dDCcan?p=preview – tronman