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

angulartutorial.net/2016/05/…

Prashobh

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

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

Antworten: