Cara Menggunakan ng-options Pada AngularJS dan langkahnya

Hay sobat, berjumpa lagi dengan saya di tutorial Dumet School. Pada artikel kali ini saya akan memberikan tips dan trik bagaimana Cara Menggunakan ng-options Pada AngularJS, dengan menggunakan fungsi ini kita tidak perlu lagi memberikan tag html option hanya kita berikan tag select saja selanjutnya kita berikan ng-option dengan angularjs nya. Sebelum kita mulai saya akan memberikan demo gambarnya terlebih dahulu

Bisa kalian lihat pada gambar di atas , disini saya ingin membuat option seputar makanan. Jika di klik akan muncul nama-nama makanan

Demo di atas ini adalah gambar jika di klik maka akan menampilkan nama-nama makanan.

Baik, sekarang kita akan implementasikanÂ Cara Menggunakan ng-options Pada AngularJS. Seperti biasa teman-teman siapkan text editornya kemudian ketikkan script seperti di bawah ini

<!DOCTYPE html>
<html>
<style type="text/css">
	select{padding: 5px;}
</style>
<body>
<div>
  <select></select>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

select{padding: 5px;}

</style>

<body>

<div>

</div>

</body>

</html>

Lalu save dengan nama index.html, dan jalankan pada browsernya. Hasilnya seperti gambar di bawah ini

Namum ketika di klik belum ada option nya, sekarang kita berikan ng-option nya dengan cara. Teman-teman berikan link / library angularjs nya terlebih dahulu

https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js

1	https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js

Langkah berikutnya kita tambahkan ng-option nya, teman-teman sisipkan ng-app, ng-controller di dalam tag div sebagai tanda memulainya angularjs nya. Disini saya berikan ng-app=”App”, ng-controller= “controller”

Berikutnya kita berikan ng-model dan ng-option pada tag select nya, berikan nama di masing-masing nya. Disini saya berikan nama pada ng-model =”selectedName” dan ng-option=”name for name in food”

Bisa kalian lihat pada gambar di atas ini yang saya beri kotak warna merah, teman-teman bebas memberikan nama apa saja kecuali for dan in.

Jika sudah kita panggil semua yang kita sisipkan pada tag html nya seperti script di bawah ini

<script>
	var app = angular.module('App', []);
		app.controller('controller', function($scope) {
		    $scope.food = ["Nasi Goreng", "Bakso", "Sate Padang", "Gudeg", "Mie Ayam"];
	});
</script>

var app = angular.module('App', []);

app.controller('controller', function($scope) {

$scope.food = ["Nasi Goreng", "Bakso", "Sate Padang", "Gudeg", "Mie Ayam"];

});

</script>

Nah bisa di lihat pada script di atas ini, pertama panggil terlebih dahulu App kemudian panggil controllernya dan tambahkan $scope dan food yang kita berikan tadi di tag select nya. Baru kita berikan nama-nama makanannya di dalam $scope.food maka jika di save dan di refresh pada browsernya option akan berfungsi dengan angularjs

Mudah sekali bukan,,,

Baik, sekian dulu pada artikel kali ini tentang Cara Menggunakan ng-options Pada AngularJS. Kita berjumpa lagi di tutorial berikutnya, sampai jumpa dan terima kasih.

Semoga bermanfaat 🙂

Cara Menggunakan ng-options Pada AngularJS

Facebook DUMET School

Categories