Cara Membuat Input Todo List Dengan AngularJS
Assalamu’alaikum warahmatullahi wabarakatuh
Halo Dumenity, selamat datang kembali di situs tips dan trik Source Code Aplikasi. Berjumpa kembali dengan saya di pembahasan tips seputar dunia situs, di kesempatan kali ini saya akan memberikan tips mengenai Cara Membuat Input Todo List Dengan AngularJS di latihan kali ini kita akan membangun sebuah inputan form kemudian akan kita tampilkan di list.
Tentu dengan menggunakan AngularJS ini saya asumsikan teman – teman telah paham mengenai javascript, karena basic dari AngularJS ini ialah javascript. Bagus seketika saja kita implementasikan Cara Membuat Input Todo List Dengan AngularJS teman – teman siapkan text editornya dan bikin struktur nya terlebih dahulu.
<!DOCTYPE html>
<html>
<head>
<title>Cara Merancang 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 pada tag body
Lalu tambahkan ng-model di tag input dan ng-click di 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 bagi proses input data di 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 lazim kita looping foreach di php, kemudian di button di pada tag li kita tambahkan ng-click bagi proses delete nya
Kemudian kita tampilkan data nya di pada tag li
Sekiranya telah save dan jalankan di browsernya, karenanya data yang kita inputkan akan tampil di tag li
Berikutnya kita bikin command delete nya, berikan script di bawah ini dan letakkan di bawah manfaat add nya
$scope.delete = function() {
$scope.tempt.splice(this.$index, 1);
}
Sekiranya telah save dan refresh di browsernya, kemudian input kembali di form inputnya dan klik button delete. Dengan seperti itu data akan terhapus, nah seperti itulah sedikit tips dengan studi case todolist dengan AngularJS
Demikian di artikel kali ini mengenai Cara Membuat Input Todo List Dengan AngularJS kita akan jumpa kembali di artikel berikutnya. Terimakasih dan hingga jumpa.
Assalamu’alaikum warahmatullahi wabarakatuh
Sumber https://kursuswebsite.org
