ajout et suppression de classes dans angularJs en utilisant ng-click

97

J'essaye de travailler comment ajouter une classe avec ngClick. J'ai téléchargé mon code sur plunker Cliquez ici . En regardant la documentation angulaire, je ne peux pas comprendre la façon exacte dont cela devrait être fait. Voici un extrait de mon code. Quelqu'un peut-il me guider dans la bonne direction

 <div ng-show="isVisible" ng-class="{'selected': $index==selectedIndex}" class="block"></div>

Manette

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });
javascript  angularjs  angularjs-ng-click  ng-class 
— Nouveau gamin dans le quartier
source
pas clair de la démo ou de l'explnation quel est l'objectif. Semble essayer de basculer un menu, mais pourquoi ne basculez-vous que le lien de menu dans la démo?
— charlietfl
— Prashobh

Réponses:

110

Il vous suffit de lier une variable dans la directive "ng-class" et de la modifier depuis le contrôleur. Voici un exemple de comment procéder:

var app = angular.module("ap",[]);

app.controller("con",function($scope){
  $scope.class = "red";
  $scope.changeClass = function(){
    if ($scope.class === "red")
      $scope.class = "blue";
    else
      $scope.class = "red";
  };
});
.red{
  color:red;
}

.blue{
  color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="ap" ng-controller="con">
  <div ng-class="class">{{class}}</div>
  <button ng-click="changeClass()">Change Class</button>    
</body>
Développer l'extrait

Voici l'exemple de travail sur jsFiddle

— Geonunez
source
29
classest un mot réservé, utilisez à la classNameplace, le compilateur YUI ne parviendra pas à réduire cela.
— Orlando
7
Et si je souhaite utiliser ce code pour plusieurs div dans la même vue? ce code change de classe pour tous les div, comment je peux appliquer la classe uniquement à l'élément sélectionné sur clic
— xzegga
Merci. Pour bien comprendre ce qui se passe lorsque vous cliquez sur le bouton Changer de classe, ouvrez la console et affichez le code.
— fidev
1
Jetez également un œil à ce fil SO. Peut ne pas être lié à 100% à la portée de la question, mais fournit toujours des informations supplémentaires utiles: stackoverflow.com/questions/31047094/…
— BiLaL
144

Je veux ajouter ou supprimer laactive classe " " dans mon code dynamiquement sur ng-click, voici ce que j'ai fait.

<ul ng-init="selectedTab = 'users'">
   <li ng-class="{'active':selectedTab === 'users'}" ng-click="selectedTab = 'users'"><a href="#users" >Users</a></li>
   <li ng-class="{'active':selectedTab === 'items'}" ng-click="selectedTab = 'items'"><a href="#items" >Items</a></li>
</ul>
— cutedevil086
source
13
-1 pour ng-init. Selon la documentation AngularJS -The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.
— Mike Grabowski
2
J'évite juste la partie contrôleur "ici", car c'est juste pour montrer les fonctionnalités de base de la façon de faire cela ...
— cutedevil086
1
Vous pouvez également utiliser la syntaxe non documentée de `ng-class =" {'active': true} [selectedTab === 'users'] "`
— Cody
Je ne comprends pas pourquoi cela fonctionnerait. Je fais quelque chose de très similaire dans Angular 1.3.8 et la classe conditionnelle n'est pas supprimée d'un élément lorsqu'un autre est cliqué. Je suppose que les autres éléments ne sont pas rendus. Pourquoi alors, cela a-t-il jamais fonctionné? Les anciennes versions d'Angular ont-elles recréé la liste entière lorsqu'un seul élément a été cliqué?
— Matt Molnar
J'ajoute simplement ceci parce que cela peut aider quelqu'un d'autre sur toute la ligne. angular-ui-router a la fonctionnalité que vous spécifiez et bien plus encore. Vous créez des états qui sont représentés par un uri. Chaque état peut avoir 1 ou plusieurs contrôleurs, 1 ou plusieurs modèles et 1 ou plusieurs vues qui leur sont liées. Les liens sont générés à l'aide de la directive ui-sref. La directive ui-sref-active liera une classe spécifique à cet élément lorsque l'état est actif. Documentation Angular UI-Router
— deadbabykitten
12

Il existe un moyen simple et propre de faire cela avec uniquement des directives.

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
— artèche
source
8

vous pouvez également le faire dans une directive, si vous souhaitez supprimer la classe précédente et ajouter une nouvelle classe

    .directive('toggleClass', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                if(element.attr("class") == "glyphicon glyphicon-pencil") {
                    element.removeClass("glyphicon glyphicon-pencil");
                    element.addClass(attrs.toggleClass);
                } else {
                    element.removeClass("glyphicon glyphicon-ok");
                    element.addClass("glyphicon glyphicon-pencil");
                }
            });
        }
    };
});

et dans votre modèle:

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>
— Shilan
source
pourquoi avez-vous les noms des icônes dans la balise et la directive?
— Robert Johnstone
C'est un commentaire stupide. C'est une chose parfaitement légitime à faire même si je conviens que ce n'est peut-être pas l'endroit idéal lorsque vous expliquez comment faire quelque chose dans Angular
— bert
pourquoi ne feriez-vous pas simplement: angular.element ('glyphicon glyphicon-pencil) .removeClass (' glyphicon glyphicon-pencil ')? angular.element est à peu près la version jqLite d'angular de $ dans jquery. Vous pouvez simplement créer un service ou une directive qui appelle cette fonction et passer les fichiers removedClasses et addedClasses dans le constructeur
— MattE
C'est vrai, mais j'essayais d'utiliser des js angulaires simples.
— Shilan
7

Vous avez exactement raison, tout ce que vous avez à faire est de définir selectedIndex dans votre ng-click.

ng-click="selectedIndex = 1"

Voici comment j'ai implémenté un ensemble de boutons qui modifient la vue ng et mettent en évidence le bouton de la vue actuellement sélectionnée.

<div id="sidebar" ng-init="partial = 'main'">
    <div class="routeBtn" ng-class="{selected:partial=='main'}" ng-click="router('main')"><span>Main</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view1'}" ng-click="router('view1')"><span>Resume</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view2'}" ng-click="router('view2')"><span>Code</span></div>
    <div class="routeBtn" ng-class="{selected:partial=='view3'}" ng-click="router('view3')"><span>Game</span></div>
  </div>

et cela dans mon contrôleur.

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};
— Zack Argyle
source
4 

var app = angular.module("MyApp", []);
app.controller("subNavController", function ($scope){

        $scope.toggle = function (){
            $scope.isVisible = ! $scope.isVisible;
        };

        $scope.isVisible = false;
    });
<div ng-show="isVisible" ng-class="{'active':isVisible}" class="block"></div>
Développer l'extrait

— Jay Prakash Singh
source
2

J'ai utilisé la suggestion de Zack Argyle ci-dessus pour obtenir ceci, que je trouve très élégant:

CSS:

.active {
    background-position: 0 -46px !important;
}

HTML:

<button ng-click="satisfaction = 'VeryHappy'" ng-class="{active:satisfaction == 'VeryHappy'}">
    <img src="images/VeryHappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Happy'" ng-class="{active:satisfaction == 'Happy'}">
    <img src="images/Happy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Indifferent'" ng-class="{active:satisfaction == 'Indifferent'}">
    <img src="images/Indifferent.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'Unhappy'" ng-class="{active:satisfaction == 'Unhappy'}">
    <img src="images/Unhappy.png" style="height:24px;" />
</button>
<button ng-click="satisfaction = 'VeryUnhappy'" ng-class="{active:satisfaction == 'VeryUnhappy'}">
    <img src="images/VeryUnhappy.png" style="height:24px;" />
</button>
— Adriaan Davel
source
2

Si vous préférez une séparation des problèmes telle que la logique d'ajout et de suppression de classes se produit sur le contrôleur, vous pouvez le faire

manette

 (function() {
    angular.module('MyApp', []).controller('MyController', MyController);

    function MyController() {
      var vm = this;
      vm.tab = 0;

      vm.setTab = function(val) {
          vm.tab = val;
       };
      vm.toggleClass = function(val) {
          return val === vm.tab;
           };
        }
    })();

HTML

<div ng-app="MyApp">
  <ul class="" ng-controller="MyController as myCtrl">
    <li ng-click="myCtrl.setTab(0)" ng-class="{'highlighted':myCtrl.toggleClass(0)}">One</li>
    <li ng-click="myCtrl.setTab(1)" ng-class="{'highlighted':myCtrl.toggleClass(1)}">Two</li>
    <li ng-click="myCtrl.setTab(2)" ng-class="{'highlighted':myCtrl.toggleClass(2)}">Three</li>
   <li ng-click="myCtrl.setTab(3)" ng-class="{'highlighted':myCtrl.toggleClass(3)}">Four</li>
 </ul>

CSS 

.highlighted {
   background-color: green;
   color: white;
}
— Dennis Wanyonyi
source
-1

Je ne peux pas croire à quel point tout le monde est complexe. C'est en fait très simple. Collez simplement ceci dans votre html (aucune directive./controller changements requis - "bg-info" est une classe bootstrap):

<div class="form-group col-md-12">
    <div ng-class="{'bg-info':     (!transport_type)}"    ng-click="transport_type=false">CARS</div>
    <div ng-class="{'bg-info': transport_type=='TRAINS'}" ng-click="transport_type='TRAINS'">TRAINS</div>
    <div ng-class="{'bg-info': transport_type=='PLANES'}" ng-click="transport_type='PLANES'">PLANES</div>
</div>
— john pallot
source
-1

pour les formes réactives -

Fichier HTML

<div class="col-sm-2">
  <button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()">{{ btn_label }}</button>
</div>
Développer l'extrait

Fichier TS 

changeMe() {
  switch (this.btn_label) {
    case 'Yes ': this.btn_label = 'Custom' ;
    this.btn_class = 'btn btn-danger btn-lg btn-block';
    break;
    case 'Custom': this.btn_label = ' No ' ;
    this.btn_class = 'btn btn-success btn-lg btn-block';
    break;
    case ' No ': this.btn_label = 'Yes ';
      this.btn_class = 'btn btn-primary btn-lg btn-block';
      break;
  }
Développer l'extrait

— M Singh
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.