Assalamu’alaikum warahmatullahi wabarakatuh
Halo Dumenity, selamat datang kembali di website tips dan trik Dumet School. Berjumpa kembali dengan saya pada pembahasan tips seputar dunia website, pada kesempatan kali ini saya akan memberikan tips tentang Cara Membuat Input Todo List Dengan AngularJS pada latihan kali ini kita akan membuat sebuah inputan form kemudian akan kita tampilkan pada list.
Tentu dengan menggunakan AngularJS ini saya asumsikan teman – teman sudah mengerti tentang javascript, karena basic dari AngularJS ini adalah javascript. Baik langsung saja kita implementasikan Cara Membuat Input Todo List Dengan AngularJS teman – teman siapkan text editornya dan buat struktur nya terlebih dahulu.
<!DOCTYPE html>
<html>
<head>
<title>Cara Membuat Input Todo List Dengan AngularJS</title>
</head>
<body>
<input><button>Add</button>
<ul>
<li><button>Delete</button></li>
</ul>
</body>
</html>
Save dengan nama index.html, kemudian teman – teman tambahkan ng-app dan ng-controller di dalam tag body
Lalu tambahkan ng-model pada tag input dan ng-click pada tag button
Kemudian kita load library AngularJS nya
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
Dan ketikkan script di bawah ini untuk proses input data pada form
angular.module('App', [])
.controller('Controller', function($scope){
$scope.tempt = [];
$scope.add = function() {
$scope.tempt.push($scope.name);
}
})
Dan di tag li kita akan looping data dengan memberikan ng-repeat atau yang biasa kita looping foreach pada php, kemudian pada button di dalam tag li kita tambahkan ng-click untuk proses delete nya
Kemudian kita tampilkan data nya di dalam tag li
Jika sudah save dan jalankan pada browsernya, maka data yang kita inputkan akan tampil pada tag li
Berikutnya kita buat perintah delete nya, berikan script di bawah ini dan letakkan di bawah fungsi add nya
$scope.delete = function() {
$scope.tempt.splice(this.$index, 1);
}
Jika sudah save dan refresh pada browsernya, kemudian input kembali pada form inputnya dan klik button delete. Dengan begitu data akan terhapus, nah itulah sedikit tips dengan studi case todolist dengan AngularJS
Sekian pada artikel kali ini tentang Cara Membuat Input Todo List Dengan AngularJS kita akan jumpa kembali pada artikel selanjutnya. Terimakasih dan sampai jumpa.
Assalamu’alaikum warahmatullahi wabarakatuh
The post Cara Membuat Input Todo List Dengan AngularJS appeared first on Kursus Website Terbaik.