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

Question 1

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

Question 2

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

Question 3

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>

Question 4

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>

Question 5

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>

Question 6

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

Question 7

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

Question 8

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>

Question 9

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

Question 10

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>

Question 11

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

Answer 1

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
la 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

angulartutorial.net/2016/05/…

Prashobh

Answer 2

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

Answer 3

angulartutorial.net/2016/05/…

Prashobh

Answer 4

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
la 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

Answer 5

29

classest un mot réservé, utilisez à la classNameplace, le compilateur YUI ne parviendra pas à réduire cela.

Orlando

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

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
la 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

Answer 10

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

Answer 11

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

Answer 12

1

Vous pouvez également utiliser la syntaxe non documentée de `ng-class =" {'active': true} [selectedTab === 'users'] "`

Cody

Answer 13

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

Answer 14

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

Answer 15

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>

Answer 16

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
la 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

Answer 17

pourquoi avez-vous les noms des icônes dans la balise et la directive?

Robert Johnstone

Answer 18

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

Answer 19

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

Answer 20

C'est vrai, mais j'essayais d'utiliser des js angulaires simples.

Shilan

Answer 21

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

Answer 22

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

Answer 23

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>

Answer 24

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

Answer 25

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>

Answer 26

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

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

Réponses: