angularjs - ngclass - ngstyle




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

Sto cercando di rendere i miei due elementi attivabili, 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>

Saluti!


A me sembra che la soluzione migliore sia usare 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 si fa clic su una direttiva, una funzione viene chiamata 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.

La ragione per usare le direttive è che non dipendi 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.


Creare una proprietà di ambito denominata selectedIndex e una funzione 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;
  };
}

Quindi il mio modello sarebbe simile a questo:

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

Solo per riferimento $ index è una variabile magica disponibile nelle direttive ng-repeat.

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

Ecco un plnkr funzionante:

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


Io cambio / rimuovo solo la classe:

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

Tipicamente con Angular si potrebbero emettere questi span usando la direttiva ngRepeat e (come nel tuo 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.

Puoi usare questo id per facilitare la commutazione delle classi sugli articoli nella tua lista (vedi plunkr o codice sotto).

L'uso 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

(in pratica applica la classe .active-selection se person.id è uguale a $ scope.activeClass - che impostiamo quando l'utente fa clic su un elemento.

Spero che questo aiuti qualcuno, ho trovato espressioni in ng-class molto utili!

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;
}