Dasar-Dasar yang dipelajari di Dalam Angular JS part 4.3

Halo teman teman pada tutorial kali ini saya akan menjelaskan tentang Dasar-Dasar yang dipelajari di Dalam Angular JS part 4.3 menggenai ng-model

ng-model berfungsi untuk mengirim sebuah data atau nilai dari view ke controller yang berisi sebuah nama variable yang terdapat pada controller.

oke teman teman berikut beberapa contoh untuk Dasar-Dasar yang dipelajari di Dalam Angular JS part 4.3 menggenai ng-model pada Angular JS seperti dibawah ini,

Two-Way Binding, yaitu berfungsi untuk mengubah nilai dalam sebuah field input, yang terdapat didalam property Angular JS, sehingga dapat mengubah nilai dari property tersebut, sebagai contoh seperti dibawah ini,

Silahkan simpan script di bawah ini pada 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>

Jika sudah silahkan jalan kan pada browsernya maka hasilnya seperti dibawah ini,

– sebelum di isi

– setelah di isi text

Validasi, ng-model juga bisa digunakan sebagi vallidasi sebuah data seperti email, number, seperti contoh dibawah ini,

silahkan simpan script dibawah ini pada 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 anda masukan bukanlah angka</span>
	
	<br>
	<br>
	
	Email
    <input type="email" name="email" ng-model="text2" placeholder="exp@gmail.com">
    <span ng-show="myForm.email.$error.email">yang anda masukan bukanlah Email</span>
</form>
</body>
</html>

Jika sudah silahkan pada browser maka hasilnya seperti dibawah ini,

– sebelum di isi

– setelah di isi text

CSS Class, berfungsi untuk mengetahui sebuah inputan yang wajib di isi pada form, seperti contoh dibawah ini,

Silahkan simpan script dibawah ini pada 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>

Jika sudah silahkan save dan jalankan pada browsernya maka hasilnya seperti dibawa ini

– sebelum di isi

– setelah di isi text

Bagai mana teman teman cukup mudah bukan, Dasar-Dasar yang dipelajari di Dalam 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

Dasar-Dasar yang dipelajari di Dalam Angular JS part 4.3

Kategori