Mengubah Model Data dengan AngularJS

Halo teman-teman, Di kesempatan kali ini saya akan memberikan contoh sederhana controller bagi Mengubah Model Data dengan AngularJS.



oke tanpa basa basi dan tanpa panjang lebar, seketika saja kita mulai cara Mengubah Model Data dengan AngularJS.



Pertama-tama-tama seperti lazimnya siapkan text-editor yang kalian sayangi  dan kalian cintai.



Lalu ketik source/kode html dibawah ini kedalam text-editor kalian :



<!DOCTYPE html>
<html>
<title>Model Data AngularJS</title>
<body>
<div ng-app=myApp ng-controller=myCtrl>
<h1 ng-click=changeName()>{{firstname}}</h1>
</div>
<p>klik nama diatas bagi mengubahNama function.</p>
<p>Contoh sederhana controller bagi mengubah model data.</p>
</body>
</html>


Nah apabila telah selesai dengan htmlnya sekarang ini masukan script angularjs nya dibawah ini :



<script src= https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = Rizal;
$scope.changeName = function() {
$scope.firstname = Murihat;
}
});
</script>


Nah apabila telah selesai, seketika kalian simpan dan run/jalankan dibrowser yang kalian gunakan. Karenanya akan terlihat hasilnya seperti dibawah ini :



Hasil sebelum diklik



Pada



Hasil setelah diklik



Pada



Lumayan gampang bukan ? jadi seperti demikianlah cara Mengubah Model Data dengan AngularJS.



Oke pembahasan kali ini mengenai cara Mengubah Model Data dengan AngularJS lumayan hingga disini yaaa, hingga bertemu dikesempatan berikutnya ya 🙂



Sekianlah dan Terimakasih semoga bermanfaat.




Sumber https://kursuswebsite.org

Popular posts from this blog

Cara Menghapus Isi Dari Form Input Menggunakan Javascript

Membuat Form Menarik Menggunakan HTML dan CSS