Come impostare la classe attiva su ng-clic?

Question

ho questo:

<div class="account-item"> 
    <div class="account-heading" ng-class="active"> 
     <h4 class="account-title"> 
      <a href="#/Messages" onclick="SetActiveAccountHeading(this);"> 
      7. @Translate("SYSTEM_MESSAGES")</a> 
     </h4> 
    </div> 
    </div> 
    <div class="account-item"> 
     <div class="account-heading" ng-class="active"> 
      <h4 class="account-title"> 
       <a href="#/Info" onclick="SetActiveAccountHeading(this);"> 
       7. @Translate("SYSTEM_INFO")</a> 
      </h4> 
     </div> 
    </div> 

In angolare ho questo:

$scope.active = "active"; 

ma come posso cambiare questo su click in modo se l'utente clicca sul menu di una volta sarebbe attivo se di nuovo clic su di esso sarebbe NON essere attivo?

Answer 1

Ok dire di avere più voci di menu e si desidera attivare o disattivare la classe di secondo per fare clic,

è possibile creare un array nel controller che rappresenta le voci di menu come,

$scope.menuItems = ['Home', 'Contact', 'About', 'Other']; 

assegnare l'impostazione predefinita, voce di menu

$scope.activeMenu = $scope.menuItems[0]; 

creare una funzione per assegnare il valore di menu selezionato, questo divertente ction assegnerà l'$scope.activeMenu all'ultima voce di menu selezionata.

$scope.setActive = function(menuItem) { 
    $scope.activeMenu = menuItem 
} 

in HTML

ciclo attraverso l'array menuItems e creare il menu.

nell'ng-class l'ultima voce di menu su cui si fa clic è uguale all'elemento nella ripetizione.

se fare clic sul menu, quindi chiamare la funzione setActive() nel controller e passare il nome della voce di menu come argomento.

<div class="account-item" ng-repeat='item in menuItems'> 
    <div class="account-heading" ng-class="{active : activeMenu === item}"> 
     <h4 class="account-title"> 
     <a href="#/Messages" ng-click="setActive(item)"> {{ item }}</a> 
     </h4> 
    </div> 
</div> 

Ecco l'DEMO

ecco un DEMO senza ng-repeat

Answer 2

Questo è quello che ti serve.

<div class="account-item" ng-init="active = true"> 
    <div class="account-heading" ng-class="{'active': active === true}" ng-click="active = !active"> 
    <h4 class="account-title"> 
     <a href="#/Messages">7. @Translate("SYSTEM_MESSAGES")</a> 
    </h4> 
    </div> 
</div> 

Nessun altro script. +1 se aiuta.

Answer 3

Per il codice più pulito provare questo:

<div class="account-item" ng-init="active = true"> 
    <div class="account-heading" ng-class="{'active': active}"> 
    <h4 class="account-title"> 
     <a href="#/Messages" ng-click="active = !active">7. @Translate("SYSTEM_MESSAGES")</a> 
    </h4> 
    </div> 
</div> 

È possibile rimuovere il SetActiveAccountHeading evento onclick (questo);.

Ecco il JsFiddle link.

È possibile visualizzare il risultato nella console dello sviluppatore .

Spero che sia d'aiuto.

Answer 4

Se si utilizza [ui-router] non è necessario scrivere nulla solo che hanno aggiungere questo UI- sref-active = "active-menu" proprietà nel tag che si desidera attivare dopo aver cliccato/navigato.

Answer 5

Angular4:

<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a> 

<a [routerLink]="['calendar']" routerLinkActive="active"> 

Documentazione: https://angular.io/api/router/RouterLinkActive