menambah dan menghapus kelas di angularJs menggunakan ng-click

97

Saya mencoba untuk bekerja bagaimana menambahkan kelas dengan ngClick. Saya telah mengupload kode saya ke plunker Klik di sini . Melihat dokumentasi sudut saya tidak tahu cara yang tepat untuk melakukannya. Di bawah ini adalah potongan kode saya. Bisakah seseorang membimbing saya ke arah yang benar

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

Kontroler

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 
— NewKidOnTheBlock
sumber
tidak jelas dari demo atau penjelasan apa tujuannya. Sepertinya mencoba untuk beralih menu, tapi mengapa Anda hanya mengubah link menu di demo?
— charlietfl
— Prashobh

Jawaban:

110

Anda hanya perlu mengikat variabel ke direktif "ng-class" dan mengubahnya dari pengontrol. Berikut adalah contoh bagaimana melakukan ini:

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

Berikut adalah contoh mengerjakan jsFiddle

— geonunez
sumber
29
classadalah kata yang sudah dipesan, classNamesebagai gantinya gunakan , compiler YUI akan gagal untuk mengecilkannya.
— Orlando
7
Bagaimana jika saya ingin menggunakan kode ini untuk lebih dari satu div dalam tampilan yang sama? kode ini actuali mengubah kelas untuk semua div, bagaimana saya dapat menerapkan kelas hanya untuk item yang diklik yang dipilih
— xzegga
Terima kasih. Untuk memahami sepenuhnya apa yang terjadi ketika tombol ubah Kelas diklik, buka konsol dan lihat kodenya.
— fidev
1
Lihat juga utas SO ini. Mungkin tidak 100% terkait dengan lingkup pertanyaan tapi masih menyediakan informasi tambahan yang berguna: stackoverflow.com/questions/31047094/...
— bilal
144

Saya ingin menambah atau menghapusactive kelas " " dalam kode saya secara dinamis ng-click, di sini apa yang telah saya lakukan.

<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
sumber
13
-1 untuk ng-init. Menurut dokumen 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
Saya hanya menghindari bagian pengontrol "di sini", karena ini hanya untuk menunjukkan fungsionalitas dasar bagaimana melakukan itu ...
— cutedevil086
1
Anda juga dapat menggunakan sintaks tak terdokumentasi dari `ng-class =" {'active': true} [selectedTab === 'users'] "`
— Cody
Saya tidak mengerti mengapa ini akan berhasil. Saya melakukan sesuatu yang sangat mirip di Angular 1.3.8 dan kelas bersyarat tidak dihapus dari elemen ketika yang lain diklik. Saya akan berasumsi karena elemen lainnya tidak dirender ulang. Lalu mengapa, apakah ini pernah berhasil? Apakah Angular versi lama membuat ulang seluruh daftar saat satu elemen diklik?
— Matt Molnar
Saya hanya menambahkan ini karena ini dapat membantu orang lain di masa mendatang. angular-ui-router memiliki fungsionalitas yang Anda tentukan dan banyak lagi. Anda membuat status yang diwakili oleh uri. Setiap negara bagian mungkin memiliki 1 atau lebih pengontrol, 1 atau lebih templat, dan 1 atau lebih tampilan yang terikat padanya. Tautan dibuat menggunakan arahan ui-sref. Direktif ui-sref-active akan mengikat kelas tertentu ke elemen tersebut ketika statusnya aktif. Sudut UI-Router Dokumentasi
— deadbabykitten
12

Ada cara sederhana dan bersih untuk melakukan ini hanya dengan arahan.

<div ng-class="{'class-name': clicked}" ng-click="clicked = !clicked"></div>
— tukang seni
sumber
8

Anda juga dapat melakukannya dengan perintah, jika Anda ingin menghapus kelas sebelumnya dan menambahkan kelas baru

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

dan di template Anda:

<i class="glyphicon glyphicon-pencil" toggle-class="glyphicon glyphicon-ok"></i>
— Shilan
sumber
mengapa Anda memiliki nama ikon di tag dan petunjuknya?
— Robert Johnstone
Itu komentar yang bodoh. Itu adalah hal yang sangat sah untuk dilakukan meskipun saya setuju bahwa itu mungkin bukan tempat untuk itu ketika Anda menjelaskan cara melakukan sesuatu di Angular
— bert
mengapa Anda tidak melakukan saja: angular.element ('glyphicon glyphicon-pencil) .removeClass (' glyphicon glyphicon-pencil ')? angular.element adalah versi jqLite dari $ di jquery. Anda bisa membuat layanan atau direktif yang memanggil fungsi ini dan meneruskan removeClasses dan addedClasses di konstruktor
— MattE
Itu benar, tapi saya mencoba menggunakan js sudut biasa.
— Shilan
7

Anda sudah melakukannya dengan benar, yang harus Anda lakukan adalah menyetel selectedIndex di ng-click Anda.

ng-click="selectedIndex = 1"

Berikut adalah cara saya mengimplementasikan sekumpulan tombol yang mengubah tampilan ng, dan menyorot tombol tampilan yang saat ini dipilih.

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

dan ini di pengontrol saya.

$scope.router = function(endpoint) {
    $location.path("/" + ($scope.partial = endpoint));
};
— Zack Argyle
sumber
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>
Luaskan cuplikan

— Jay Prakash Singh
sumber
2

Saya menggunakan saran Zack Argyle di atas untuk mendapatkan ini, yang menurut saya sangat elegan:

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

Jika Anda lebih suka pemisahan perhatian sehingga logika untuk menambah dan menghapus kelas terjadi pada pengontrol, Anda dapat melakukannya

pengontrol

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

Saya tidak percaya betapa rumitnya semua orang membuat ini. Ini sebenarnya sangat sederhana. Cukup tempelkan ini ke html Anda (tidak diperlukan perubahan direktif./controller - "bg-info" adalah kelas 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
sumber
-1

untuk bentuk Reaktif -

File HTML

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

File 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;
  }
Luaskan cuplikan

— M Singh
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.