kAssalamu'alaikum Warohmatullohi Wabarokatuh.
Hay, apa kabar pembaca !
Pada hari ini saya akan membagikan sedikit trik form dengan ANGULAR.js
Nah,berikut ini adalah struktur dasar dalam penggunaan angular.js.
Nah, bagi Anda yang ingin mendownload file angular.js untuk lokal bisa di download DISINI.
Sekarang mari kita lanjut ke contoh pertama ( dasar ).
Buat sebuah folder dengan nama "terserah" kemudian copy file angular.js kedalamnya.
Lalu, buat sebuah file dengan file editor dan simpan dengan nama input.php / input.html
Berikut code yang harus di buat :
Hay, apa kabar pembaca !
Pada hari ini saya akan membagikan sedikit trik form dengan ANGULAR.js
Nah,berikut ini adalah struktur dasar dalam penggunaan angular.js.
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
//code-disini
</body>
</html>
</body>
</html>
Nah, bagi Anda yang ingin mendownload file angular.js untuk lokal bisa di download DISINI.
Sekarang mari kita lanjut ke contoh pertama ( dasar ).
Buat sebuah folder dengan nama "terserah" kemudian copy file angular.js kedalamnya.
Lalu, buat sebuah file dengan file editor dan simpan dengan nama input.php / input.html
Berikut code yang harus di buat :
<!DOCTYPE html>
<html lang="en-US">
<script src="angular.min.js"></script>
<body>
<html lang="en-US">
<script src="angular.min.js"></script>
<body>
<div ng-app="">
<p>Nama Lengkap : <input type="text" ng-model="nama"></p>
<h1>Selamat datang {{nama}}</h1>
</div>
</body>
</html>
Untuk hasilnya Anda bisa melihatnya setelah Anda mencoba.
<p>Nama Lengkap : <input type="text" ng-model="nama"></p>
<h1>Selamat datang {{nama}}</h1>
</div>
</body>
</html>
Untuk hasilnya Anda bisa melihatnya setelah Anda mencoba.
Kemudian kita inovasikan dengan sebuah combobox, menjadi seperti berikut :
<!DOCTYPE html>
<html lang="en-US">
<script src="angular.min.js"></script>
<body>
<html lang="en-US">
<script src="angular.min.js"></script>
<body>
<div ng-app="">
<p>Nama Lengkap : <input type="text" ng-model="nama"></p>
<p>Jenis Kelamin :
<select ng-model="jkelamin">
<option value="Laki-laki">Laki-laki</option>
<option value="Wanita">Wanita</option>
</select>
</p>
<h1>Nama Lengkap {{nama}}</h1>
<h1>Jenis Kelamin {{jkelamin}}</h1>
</div>
</body>
</html>
Maka hasilnya adalah seperti dibawah ini :
Contoh :
<p>Nama Lengkap : <input type="text" ng-model="nama"></p>
<p>Jenis Kelamin :
<select ng-model="jkelamin">
<option value="Laki-laki">Laki-laki</option>
<option value="Wanita">Wanita</option>
</select>
</p>
<h1>Nama Lengkap {{nama}}</h1>
<h1>Jenis Kelamin {{jkelamin}}</h1>
</div>
</body>
</html>
Maka hasilnya adalah seperti dibawah ini :
Contoh :
Nama Lengkap :
Jenis Kelamin :
Jenis Kelamin :
No comments:
Post a Comment