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
sumber
Jawaban:
Anda hanya perlu mengikat variabel ke direktif "ng-class" dan mengubahnya dari pengontrol. Berikut adalah contoh bagaimana melakukan ini:
Berikut adalah contoh mengerjakan jsFiddle
sumber
class
adalah kata yang sudah dipesan,className
sebagai gantinya gunakan , compiler YUI akan gagal untuk mengecilkannya.Saya ingin menambah atau menghapus
active
kelas " " dalam kode saya secara dinamisng-click
, di sini apa yang telah saya lakukan.sumber
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.
Ada cara sederhana dan bersih untuk melakukan ini hanya dengan arahan.
sumber
Anda juga dapat melakukannya dengan perintah, jika Anda ingin menghapus kelas sebelumnya dan menambahkan kelas baru
dan di template Anda:
sumber
Anda sudah melakukannya dengan benar, yang harus Anda lakukan adalah menyetel selectedIndex di ng-click Anda.
Berikut adalah cara saya mengimplementasikan sekumpulan tombol yang mengubah tampilan ng, dan menyorot tombol tampilan yang saat ini dipilih.
dan ini di pengontrol saya.
sumber
sumber
Saya menggunakan saran Zack Argyle di atas untuk mendapatkan ini, yang menurut saya sangat elegan:
CSS:
HTML:
sumber
Jika Anda lebih suka pemisahan perhatian sehingga logika untuk menambah dan menghapus kelas terjadi pada pengontrol, Anda dapat melakukannya
pengontrol
HTML
CSS
sumber
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):
sumber
untuk bentuk Reaktif -
File HTML
File TS
sumber