Angular.js Come modificare una classe di elementi css al clic e rimuovere tutti gli altri

Question

sto cercando di rendere i miei due elementi attivati, quindi se un elemento viene cliccato rimuoverà tutti i riferimenti di my-class e lo applicherà a se stesso. Qualche idea?

<span id="1" ng-style="my-class" ng-click="tog=my-class"></span> 

<span id="2" ng-style="my-class" ng-click="tog=my-class"></span> 

Cheers!

Answer 1

Creare una proprietà ambito chiamato selectedIndex, e una funzione di itemClicked:

function MyController ($scope) { 
    $scope.collection = ["Item 1", "Item 2"]; 

    $scope.selectedIndex = 0; // Whatever the default selected index is, use -1 for no selection 

    $scope.itemClicked = function ($index) { 
    $scope.selectedIndex = $index; 
    }; 
} 

Poi il mio modello potrebbe essere simile a questa:

<div> 
     <span ng-repeat="item in collection" 
      ng-class="{ 'selected-class-name': $index == selectedIndex }" 
      ng-click="itemClicked($index)"> {{ item }} </span> 
</div> 

Solo per riferimento $ indice è una magia variabile disponibile all'interno delle direttive ng-repeat.

È possibile utilizzare lo stesso campione anche in una direttiva e un modello.

Ecco un plnkr di lavoro:

http://plnkr.co/edit/jOO8YdPiSJEaOcayEP1X?p=preview

Answer 2

hai provato con una condizione in ng-class come qui: http://jsfiddle.net/DotDotDot/zvLvg/?

<span id='1' ng-class='{"myclass":tog==1}' ng-click='tog=1'>span 1</span> 
    <span id='2' ng-class='{"myclass":tog==2}' ng-click='tog=2'>span 2</span> 

Answer 3

A me sembra che la soluzione migliore è quella di utilizzare una direttiva; non è necessario che il controller sappia che la vista è in fase di aggiornamento.

Javascript:

var app = angular.module('app', ['directives']); 

angular.module('directives', []).directive('toggleClass', function() { 
    var directiveDefinitionObject = { 
     restrict: 'A', 
     template: '<span ng-click="localFunction()" ng-class="selected" ng-transclude></span>', 
     replace: true, 
     scope: { 
      model: '=' 
     }, 
     transclude: true, 
     link: function (scope, element, attrs) { 
      scope.localFunction = function() { 
       scope.model.value = scope.$id; 
      }; 
      scope.$watch('model.value', function() { 
       // Is this set to my scope? 
       if (scope.model.value === scope.$id) { 
        scope.selected = "active"; 
       } else { 
        // nope 
        scope.selected = ''; 
       } 
      }); 
     } 
    }; 
    return directiveDefinitionObject; 
}); 

HTML:

<div ng-app="app" ng-init="model = { value: 'dsf'}"> <span>Click a span... then click another</span> 

<br/> 
<br/> 
<span toggle-class model="model">span1</span> 

<br/><span toggle-class model="model">span2</span> 

<br/><span toggle-class model="model">span3</span> 

CSS:

.active { 
    color:red; 
} 

ho un violino che demonstrates. L'idea è quando una direttiva viene cliccato, viene chiamata una funzione sulla direttiva che imposta una variabile sull'ID corrente. Quindi ogni direttiva ha lo stesso valore. Se la corrispondenza dell'ID dell'ambito, l'elemento corrente è impostato per essere attivo utilizzando ng-class.

Il motivo per utilizzare le direttive è che non dipendono più da un controller. In effetti non ho un controller (definisco una variabile nella vista denominata "modello"). È quindi possibile riutilizzare questa direttiva in qualsiasi punto del progetto, non solo su un controller.

Answer 4

In genere con Angolare si sarebbero in uscita questi intervalli utilizzando la direttiva ngRepeat e (come nel caso) ogni elemento avrebbe un ID. So che questo non è vero per tutte le situazioni, ma è tipico se si richiedono dati da un backend - gli oggetti in una matrice tendono ad avere identificatori univoci.

È possibile utilizzare questo ID per facilitare la commutazione delle classi sugli elementi nell'elenco (vedere plunkr o codice di seguito).

L'utilizzo degli id ​​degli oggetti può anche eliminare l'effetto indesiderato quando l'indice $ (descritto in altre risposte) è incasinato a causa dell'ordinamento in Angolare.

Esempio Plunkr:. http://plnkr.co/edit/na0gUec6cdMABK9L6drV

(a fondo la classe .active-selezione se il person.id è pari a $ scope.activeClass - che abbiamo impostato quando l'utente fa clic su un elemento

Spero che questo aiuta qualcuno, ho trovato espressioni in ng-classe di essere molto utile!

HTML

<ul> 
    <li ng-repeat="person in people" 
    data-ng-class="{'active-selection': person.id == activeClass}"> 
    <a data-ng-click="selectPerson(person.id)"> 
     {{person.name}} 
    </a> 
    </li> 
</ul> 

JS

app.controller('MainCtrl', function($scope) { 
    $scope.people = [{ 
    id: "1", 
    name: "John", 
    }, { 
    id: "2", 
    name: "Lucy" 
    }, { 
    id: "3", 
    name: "Mark" 
    }, { 
    id: "4", 
    name: "Sam" 
    }]; 

    $scope.selectPerson = function(id) { 
    $scope.activeClass = id; 
    console.log(id); 
    }; 
});  

CSS:

.active-selection { 
    background-color: #eee; 
} 

Answer 5

I unico cambiamento/rimuovere la classe:

function removeClass() { 
        var element = angular.element('#nameInput'); 
      element.removeClass('nameClass'); 
    }; 

Answer 6

HTML

<span ng-class="{'item-text-wrap':viewMore}" ng-click="viewMore= !viewMore"></span> 

Answer 7

non può rispondere direttamente hitautodestruct non abbastanza reputazione ma non è pratica comune usare le funzioni di Jquery mescolate con Angolare. Angolare supporta una versione lite di Jquery.

Per ulteriori informazioni a riguardo, vorrei fare riferimento alla documentazione che è molto ben scritta su questo particolare argomento.

https://docs.angularjs.org/api/ng/function/angular.element