Belajar AngularJS : Menggunakan Ekspresi dan Contohnya Pada AngularJS Part 3

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

Artikel Terkait

2 komentar

Waduh wkwkw sudah main di array wkwkw :D nanti chrod ya mas jelasin he di tunggu du web aku

haha, aku buatnya asal-asalan lo itu :v


EmoticonEmoticon