Belajar AngularJS : Menggunakan Ekspresi dan Contohnya Pada AngularJS Part 3

Diposting pada

Pada pembelajaran kali ini masih berkaitan dengan penggunaan ekspresi pada AngularJS, poin pentingnya yaitu pendeklarasian array pada ng-init dan penggunaannya dengan metode {{}} dan ng-bind. Bagi kalian yang kelewatan materinya mungkin bisa dicari materi part 1 dan part 2.

Ekspresi Array AngularJS
Array AngularJS

 

Apa itu array?

Array adalah sekumpulan nilai yang memiliki tipe data yang sama yang dideklarasikan kedalam satu variabel. Misalkan dalam sebuah kasus seorang siswa memiliki nilai dari beberapa mata pelajaran, jika kalian ingin mendklarsikan nilai-nilai tersebut kedalam satu variabel maka kalian harus menggunakan array.
Langsung saja kita masuk ke contoh penggunaan array pada AngularJS yang pertama kita menggunakan metode {{}} pada inline HTML nya.

 

<!DOCTYPE html>
<html>
<title>Ekspresi 3 Array</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>

<div ng-app=”” ng-init=”nilai=[60,90,100,70,80]”>
<!–Misalkan indeks ke tiga adalah nilai matematika –>
<p>Nilai Matematika :  {{ nilai[2] }}</p>

</div>

</body>
</html>

Result dari code di atas adalah
Nilai Matematika : 100

Note : Perlu diingat bahwa indeks pertama dari sebuah array dimulai dari 0. Jika kita sebutkan indeks dan nilai dari array di atas adalah nilai[0] = 60, nilai[1] = 90, nilai[2] = 100, nilai[3] = 70, nilai[4] =80

Metode kedua kita menggunakan ng-bind, contoh code nya seperti di bawah ini :

<!DOCTYPE html>
<html>
<title>Ekspresi 3 Array</title>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script>
<body>

<div ng-app=”” ng-init=”nilai=[60,90,100,70,80]”>
<!–Misalkan indeks ke tiga adalah nilai matematika –>
<p>Nilai Bahasa Indonesia :  <span ng-bind=”nilai[3]”></span></p>

</div>

</body>
</html>

Result dari code kedua adalah
Nilai Bahasa Indonesia : 70

Dari kedua source code di atas yang menonjol adalah perbedaan penggunakan {{}} dan ng-bind dalam ekspresi array. Kalau menggunakan {{}} kalian harus menulis kodenya setelah tag open HTML sedangkan untuk ng-bing di dalam tag open HTML.

Selain materi itu, sebelum lanjut ke materi selanjutnya yang mungkin memiliki tingkat kesulitan yang lebih. Saya sertakan di bawah ini perbedaan AngularJS dan JavaScript.

 

AngularJS JavaScript
Ekspresi dapat ditulis di inline HTML Ekspresi dibuat di dalam tag khusus yaitu tag script
Ekspresi pada AngularJs tidak mendukung kondisi (if), perulangan (for, do while, dll) dan eksepsi Ekspresi pada Javascript mendukung kondisi, perulangan dan eksepsi
Ekspresi pada AngularJS mendukung filter Pada Javascript tidak mendukung filter

2 thoughts on “Belajar AngularJS : Menggunakan Ekspresi dan Contohnya Pada AngularJS Part 3

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.