Mengubah Model Data dengan AngularJS

Hai teman-teman, Pada kesempatan kali ini saya akan memberikan contoh sederhana controller untuk Mengubah Model Data dengan AngularJS.

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

Pertama-tama seperti biasa 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 untuk "mengubahNama" function.</p>
  <p>Contoh sederhana controller untuk mengubah model data.</p>
</body>
</html>

Nah jika sudah selesai dengan htmlnya sekarang 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 jika sudah selesai, langsung kalian simpan dan run/jalankan dibrowser yang kalian gunakan. Maka akan terlihat hasilnya seperti dibawah ini :

Hasil sebelum diklik

Hasil sesudah diklik

Cukup mudah bukan ? jadi seperti itulah cara Mengubah Model Data dengan AngularJS.

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

Sekian dan Terimakasih semoga bermanfaat.

Kategori