AngularJS ng model Directive
pengenalan angular, dan penerapan angular.
II.Alat dan Bahan.
Laptop / PC
W3SCHOOLS
Sublime Text
III.Tujuan.
Agar kita tau apa itu angular, cara cara penerapan nya.
IV.Penjelasan.
AngularJS ng model Directive
ng model direktif mengikat nilai kontrol HTML (input, pilih, textarea) untuk data aplikasi.
model Directive
Dengan ng-modeldirektif Anda dapat mengikat nilai dari sebuah field input untuk variabel dibuat dalam AngularJS.
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
Dua Way Binding
Pengikatan berjalan dua arah. Jika pengguna mengubah nilai dalam field input, properti AngularJS juga akan mengubah nilainya:
Contoh
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
Validasi User Input
ng-modeldirektif dapat menyediakan jenis validasi untuk data aplikasi (nomor, e-mail, diperlukan):
Contoh
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail address</span>
</form>
Dalam contoh di atas, rentang akan ditampilkan hanya jika ekspresi dalam ng-showatribut kembali true.
Jika properti di ng-modelatribut tidak ada, AngularJS akan membuat satu untuk Anda.
Status aplikasi
ng-modeldirektif dapat memberikan status data aplikasi (valid, kotor, menyentuh, error):
Contoh
<form ng-app="" name="myForm" ng-init="myText = 'post@myweb.com'">
Email:
<input type="email" name="myAddress" ng-model="myText" required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
CSS Kelas
ng-modeldirektif menyediakan kelas CSS untuk elemen HTML, tergantung pada status mereka:
Contoh
<style>
input.ng-invalid {
background-color: lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myName" ng-model="myText" required>
</form>
ng-modeldirektif menambahkan / menghapus kelas berikut, sesuai dengan status bidang bentuk:
ng-kosong
ng-tidak-kosong
ng-menyentuh
ng-tersentuh
ng-valid
ng-valid
ng-kotor
ng-pending
ng-murni
Contoh :
Maka outputnya :
V.Kesimpulan.
AngularJS adalah sebuah framework Javascript yang di kembangkan atau di bangun oleh tim Google. angularjs menggunakan metode MVC yang membuat source code aplikasi kita menjadi bersih dan mudah di kembangkan.
VI.Refrensi.
https://www.w3schools.com/angular/angular_expressions.asp
Komentar
Posting Komentar