Fungsi $watch pada AngularJS
Halo teman teman di panduan kali ini saya akan menjelaskan mengenai Guna $watch di AngularJS, Guna $watch di AngularJS yaitu bagi mengetahui perubahan dari suatu nilai yang terjadi atau terdapat di sebuah variable di pada scope. Parameter pertama-tama yang digunakan di method ini yaitu string dari nama variable yang akan eksekusi kemudian parameter kedua yaitu berupa sebuah manfaat yang akan dijalankan ketika suatu nilai yang di eksekusi berubah.
Nah biar lebih jelasnya kita akan masuk ke study case nya, mengenai Guna $watch di AngularJS
Langkah pertama-tama kita akan bikin dulu sebuah file index.html, dan kemudian silahkan teman teman simpan script dibawahi ini di file index.html
<!DOCTYPE html>
<html>
<head>
<title>Guna $watch di AngularJS</title>
<style type=text/css>
*{margin: 0; padding: 0;}
.container {width: 500px; margin: auto; background:#8EBF5F;}
h3{text-align: center;}
textarea {margin: 20px 0; text-align: center; width: 375px; height: 100px;}
.text1 {margin-bottom: 10px;}
.text2 {background: #254C00; padding: 10px 0 10px 10px; color: #BEE599;}
</style>
</head>
<script src=https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js></script>
<script type=text/javascript src=app.js></script>
<script type=text/javascript src=MainController.js></script>
<body ng-app='FirstApp' ng-controller='MainController'>
<div class=container>
<h3>Guna $watch di AngularJS</h3>
<center><textarea ng-model='isi' type='text' placeholder=masukan text></textarea></center>
<div>
<p class=text1>{{isi}}</p>
</div>
<div>
<p class=text2>Jumlah {{count}} </p>
</div>
</div>
</body>
</html>
Di file index.html yang telah kita bikin berfungsi bagi memunculkan atau menampilkan data yang di dikala kita isi karenanya nilai dari sebuah data yang kita isi tersebut akan muncul dibawahnya, karena data yang telah kita masukan akan dirubah dengan menggunakan $watch.
Berikutnya kita akan bikin sebuah controllernya, dan silahkan teman teman simpan script dibawah ini dengan nama MainController.js
app.controller('MainController', function($scope){
$scope.isi = '';
$scope.count = -1;
$scope.$watch('isi', function(newValue, oldValue){
$scope.count = $scope.count + 1;
})
});Berikutnya yang mesti kita bikin yaitu modulenya, dan silahkan teman teman simpan script dibawah ini dengan nama app.js
var app=angular.module('FirstApp',[]);Sekiranya telah silahkan teman teman jalankan di browser nya karenanya akan muncul seperti dibawah ini,.
Oke teman teman lumayan gampang bukan mengenai Guna $watch di AngularJS, demikian dulu panduan saya kali ini semoga bermanfaat.
Terimakasih
Sumber https://kursuswebsite.org
