acara AngularJS
Acara AngularJS HTML memiliki instruksi sendiri.
ng-klik perintah
ng-klik direktif mendefinisikan AngularJS klik acara.
AngularJS contoh
<Tombol ng-klik = "count = count + 1"> Point saya! </ Tombol>
<P> {{count}} </ p>
</ Div>
Coba »
Menyembunyikan elemen HTML
ng-hide direktif set aplikasi bagian terlihat.
ng-hide = "true" Mengatur elemen HTML tidak terlihat.
ng-hide = "false" Mengatur elemen HTML terlihat.
AngularJS contoh
<Tombol ng-klik = "beralih ()" >> Hide / Show </ button>
<P ng-hide = "myVar ">
Nama: <input type = "text" ng-model = "firstName"> Situs
Nama: <input type = "text" ng-model = "lastName"> Situs
Situs
Nama Lengkap: {{firstName + " " + lastName}}
</ P>
</ Div>
<Script>
var aplikasi = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ lingkup) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = false;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
};
});
</ Script>
Coba »
Aplikasi Analisis:
Pertama bagian pengontrol bagian personController serupa.
Aplikasi memiliki atribut default: $ scope.myVar = false;
ng-hide set instruksi <p> elemen dan dua masukan bidang yang terlihat, tergantung pada nilai myVar (benar atau salah) set terlihat.
beralih () adalah fungsi yang digunakan untuk mengganti nilai variabel myVar (benar dan salah).
ng-hide = "true" sehingga elemen yang tidak terlihat.
elemen tampilan HTML
ng-show instruksi dapat digunakan untuk mengatur apakah bagian penerapan terlihat.
ng-show = "false" Anda dapat mengatur elemen HTML tidak terlihat.
ng-show = "true" dapat mengatur elemen HTML terlihat.
Contoh berikut ini menggunakan ng-perintah show:
AngularJS contoh
<Tombol ng-klik = "beralih ()"> Hide / Show </ button>
<P ng-show = "myVar ">
Nama: <input type = "text" ng-model = "firstName"> Situs
Nama asli: <input type = "text" ng-model = "lastName"> Situs
Situs
Nama: {{firstName + "" + lastName}}
</ P>
</ Div>
<Script>
var aplikasi = angular.module ( 'myApp', []);
app.controller ( 'personCtrl', function ($ lingkup) {
$ Scope.firstName = "John",
$ Scope.lastName = "Doe"
$ Scope.myVar = true;
$ Scope.toggle = function () {
! $ Scope.myVar = $ scope.myVar;
}
});
</ Script>
Coba »