Hinzufügen und Entfernen von Klassen in AngularJs mit ng-click

97

Ich versuche zu arbeiten, wie man mit ngClick eine Klasse hinzufügt. Ich habe meinen Code auf plunker hochgeladen. Klicken Sie hier . Wenn ich mir die eckige Dokumentation ansehe, kann ich nicht genau herausfinden, wie es gemacht werden soll. Unten ist ein Ausschnitt meines Codes. Kann mich jemand in die richtige Richtung führen?

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

Regler

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 
— Ein neues Kind im Wohnblock
quelle
nicht klar aus Demo oder Erklärung, was Ziel ist. Scheint zu versuchen, ein Menü umzuschalten, aber warum schalten Sie in der Demo nur den Menü-Link um?
— charlietfl
— Prashobh

Antworten:

110

Sie müssen nur eine Variable in die Direktive "ng-class" einbinden und sie vom Controller aus ändern. Hier ist ein Beispiel dafür:

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>
Erweitern Sie das Snippet

Hier ist das Beispiel für jsFiddle

— geonunez
quelle
29
classist ein reserviertes Wort, verwenden Sie classNamestattdessen, YUI-Compiler kann dies nicht minimieren.
— Orlando
7
Was ist, wenn ich diesen Code für mehr als ein Div in derselben Ansicht verwenden möchte? Dieser Code aktualisiert die Klasse für alle Div. Wie kann ich die Klasse nur auf das ausgewählte angeklickte Element
— anwenden?
Vielen Dank. Um zu verstehen, was passiert, wenn auf die Schaltfläche Klasse ändern geklickt wird, öffnen Sie die Konsole und zeigen Sie den Code an.
— Fidev
1
Schauen Sie sich auch diesen SO-Thread an. Könnte nicht zu 100% mit dem Fragenbereich
— BiLaL
144

Ich möchte die Klasse " " in meinem Code dynamisch hinzufügen oder entfernen , hier, was ich getan habe.activeng-click

<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
quelle
13
-1 für ng-init. Laut AngularJS docs -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
Ich vermeide nur den Controller-Teil "hier", da dies nur dazu dient, die grundlegende Funktionalität zu zeigen, wie das geht ...
— cutedevil086
1
Sie können auch die undokumentierte Syntax von `ng-class =" {'active': true} [selectedTab === 'users'] "`
— Cody
Ich verstehe nicht, warum das funktionieren würde. Ich mache etwas sehr Ähnliches in Angular 1.3.8 und die bedingte Klasse wird nicht aus einem Element entfernt, wenn auf ein anderes geklickt wird. Ich würde annehmen, weil die anderen Elemente nicht neu gerendert werden. Warum hat das dann jemals funktioniert? Haben alte Versionen von Angular die gesamte Liste neu erstellt, als auf ein einzelnes Element geklickt wurde?
— Matt Molnar
Ich füge dies nur hinzu, weil es jemand anderem auf der ganzen Linie helfen kann. Angular-UI-Router verfügt über die von Ihnen angegebene Funktionalität und vieles mehr. Sie erstellen Zustände, die durch einen Uri dargestellt werden. Jeder Status kann 1 oder mehrere Controller, 1 oder mehrere Vorlagen und 1 oder mehrere daran gebundene Ansichten haben. Links werden mit der Direktive ui-sref generiert. Die Anweisung ui-sref-active bindet eine bestimmte Klasse an dieses Element, wenn der Status aktiv ist. Angular UI-Router-Dokumentation
— deadbabykitten
12

Es gibt eine einfache und saubere Möglichkeit, dies nur mit Anweisungen zu tun.

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
— artecher
quelle
8

Sie können dies auch in einer Direktive tun, wenn Sie die vorherige Klasse entfernen und eine neue Klasse hinzufügen möchten

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

und in Ihrer Vorlage:

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>
— Shilan
quelle
Warum haben Sie die Namen der Symbole im Tag und in der Direktive?
— Sevenearths
Das ist ein dummer Kommentar. Es ist eine absolut legitime Sache, obwohl ich damit einverstanden bin, dass es vielleicht nicht der richtige Ort dafür ist, wenn Sie erklären, wie man etwas in Angular macht
— Bert
Warum würden Sie nicht einfach Folgendes tun: angle.element ('Glyphicon Glyphicon-Pencil) .removeClass (' Glyphicon Glyphicon-Pencil ')? angular.element ist so ziemlich die jqLite-Version von $ in jquery von angle. Sie können einfach einen Dienst oder eine Direktive erstellen, die diese Funktion aufruft, und im Konstruktor removeClasses und addedClasses übergeben
— MattE
Das stimmt, aber ich habe versucht, einfache eckige js zu verwenden.
— Shilan
7

Sie haben es genau richtig, alles was Sie tun müssen, ist selectedIndex in Ihrem ng-Klick zu setzen.

ng-click="selectedIndex = 1"

Hier ist, wie ich eine Reihe von Schaltflächen implementiert habe, die die ng-Ansicht ändern und die Schaltfläche der aktuell ausgewählten Ansicht hervorheben.

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

und das in meinem Controller.

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};
— Zack Argyle
quelle
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>
Erweitern Sie das Snippet

— Jay Prakash Singh
quelle
2

Ich habe den obigen Vorschlag von Zack Argyle verwendet, um dies zu erhalten, was ich sehr elegant finde:

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
quelle
2

Wenn Sie die Trennung von Bedenken bevorzugen, sodass die Logik zum Hinzufügen und Entfernen von Klassen auf dem Controller ausgeführt wird, können Sie dies tun

Regler

 (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
quelle
-1

Ich kann nicht glauben, wie komplex jeder das macht. Das ist eigentlich sehr einfach. Fügen Sie dies einfach in Ihr HTML ein (keine Änderung der Direktive / Controller erforderlich - "bg-info" ist eine Bootstrap-Klasse):

<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
quelle
-1

für reaktive Formen -

HTML-Datei

<div class="col-sm-2">
  <button type="button"  [class]= "btn_class"  id="b1" (click)="changeMe()">{{ btn_label }}</button>
</div>
Erweitern Sie das Snippet

TS-Datei 

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;
  }
Erweitern Sie das Snippet

— M Singh
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.