Dasar-Dasar yang dipelajari di Dalam Angular JS part 4.3
Halo teman teman di panduan kali ini saya akan menjelaskan mengenai Mendasar-Mendasar yang dipelajari di Pada Angular JS part 4.3 menggenai ng-model
ng-model berfungsi bagi mengirim sebuah data atau nilai dari view ke controller yang berisi sebuah nama variable yang terdapat di controller.
oke teman teman berikut beberapa contoh bagi Mendasar-Mendasar yang dipelajari di Pada Angular JS part 4.3 menggenai ng-model di Angular JS seperti dibawah ini,
- Two-Way Binding, yaitu berfungsi bagi mengubah nilai pada sebuah field input, yang terdapat didalam property Angular JS, sehingga dapat mengubah nilai dari property tersebut, selaku contoh seperti dibawah ini,
- Silahkan simpan script di bawah ini di text editornya dan save as dengan nama index.html
<!DOCTYPE html>
<html>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<body>
<div ng-app=myApp ng-controller=myCtrl>
Name: <input ng-model=name>
<h1>Your Name: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = Irwan;
});
</script>
</body>
</html>
- Seandainya telah silahkan jalan kan di browsernya karenanya hasilnya seperti dibawah ini,
– sebelum di isi
– setelah di isi text
- Validasi, ng-model pun dapat digunakan sebagi vallidasi sebuah data seperti email, number, seperti contoh dibawah ini,
- silahkan simpan script dibawah ini di text editornya save as dengan nama validasi.html
<!DOCTYPE html>
<html>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<body>
<form ng-app= name=myForm>
Nuumber
<input type=number name=number ng-model=text placeholder=number>
<span ng-show=myForm.number.$error.number>yang kamu masukan bukanlah angka</span>
<br>
<br>
<input type=email name=email ng-model=text2 placeholder=exp@gmail.com>
<span ng-show=myForm.email.$error.email>yang kamu masukan bukanlah Email</span>
</form>
</body>
</html>
- Seandainya telah silahkan di browser karenanya hasilnya seperti dibawah ini,
– sebelum di isi
– setelah di isi text
- CSS Class, berfungsi bagi mengetahui sebuah inputan yang wajib di isi di form, seperti contoh dibawah ini,
- Silahkan simpan script dibawah ini di text editornya dengan nama form.html
<!DOCTYPE html>
<html>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js></script>
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app= name=myForm>
nama <input name=name ng-model=text1 required>
email <input name=email ng-model=text2 required>
telp <input name=number ng-model=text3 required>
<input type=submit value=oke>
</form>
</body>
</html>
- Seandainya telah silahkan save dan jalankan di browsernya karenanya hasilnya seperti dibawa ini
– sebelum di isi
– setelah di isi text
Bagai mana teman teman lumayan gampang bukan, Mendasar-Mendasar yang dipelajari di Pada Angular JS part 4.3 menggenai ng-model, semoga bermanfaat
Terimakasih
Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.1
Dasar-Dasar yang Dipelajari di Dalam Angular JS Part 4.2
Sumber https://kursuswebsite.org
