Ungkapan AngularJS: ARRAY, Objects, $ eval, Strings (Contoh)

Apakah Ungkapan JS Angular?

Ungkapan adalah pemboleh ubah yang didefinisikan dalam pendakap ganda {{}}. Ia sangat biasa digunakan dalam JS Angular, dan anda akan melihatnya dalam tutorial sebelumnya.

Dalam tutorial ini, anda akan belajar-

• Terangkan Ungkapan Angular.js dengan contoh
• Nombor AngularJS
• Rentetan AngularJS
• Objek AngularJS
• Susunan AngularJS
• Keupayaan dan Batasan Ekspresi AngularJS
• Perbezaan antara ungkapan dan $ eval

Terangkan Ungkapan Angular.js dengan contoh

Ungkapan AngularJS adalah ekspresi yang ditulis di dalam pendakap berganda {{expression}}.

Sintaks:

Contoh ringkas ungkapan ialah {{5 + 6}}.

Ungkapan Angular.JS digunakan untuk mengikat data ke HTML dengan cara yang sama seperti arahan ng-bind. AngularJS memaparkan data tepat di tempat ekspresi diletakkan.

Mari lihat contoh ungkapan Angular.JS.

Dalam contoh ini, kami hanya ingin menunjukkan penambahan nombor yang sederhana sebagai ungkapan.

Guru99 Global Event
Addition : {{6+9}}

Penjelasan Kod:

1. Arahan ng-aplikasi dalam contoh kami kosong seperti yang ditunjukkan dalam tangkapan skrin di atas. Ini hanya bermaksud bahawa tidak ada modul untuk menetapkan pengawal, arahan, perkhidmatan yang dilampirkan pada kod.
2. Kami menambah ungkapan sederhana yang melihat penambahan 2 nombor.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

• Dapat dilihat bahawa penambahan dua nombor 9 dan 6 berlaku dan nilai tambah 15 ditunjukkan.

Nombor Angular.JS

Ungkapan boleh digunakan untuk bekerja dengan nombor juga. Mari lihat contoh ungkapan Angular.JS dengan nombor.

Dalam contoh ini, kami hanya ingin menunjukkan pendaraban sederhana bagi 2 pemboleh ubah nombor yang disebut margin dan profit dan menunjukkan nilai darabnya.

Guru99 Global Event
Total profit margin{{margin*profit}}

Penjelasan Kod:

1. Arahan ng-init digunakan dalam sudut.js untuk menentukan pemboleh ubah dan nilai yang sesuai dalam pandangan itu sendiri. Ia agak seperti menentukan pemboleh ubah tempatan untuk membuat kod dalam bahasa pengaturcaraan apa pun. Dalam kes ini, kita mendefinisikan 2 pemboleh ubah yang disebut margin dan profit dan memberikan nilai kepada mereka.
2. Kami kemudian menggunakan 2 pemboleh ubah tempatan dan menggandakan nilainya.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

• Dapat dilihat dengan jelas bahawa pendaraban 2 nombor 2 dan 200 berlaku, dan nilai darab 400 ditunjukkan.

Rentetan AngularJS

Ungkapan boleh digunakan untuk bekerja dengan rentetan juga. Mari lihat contoh ungkapan JS Angular dengan rentetan.

Dalam contoh ini, kita akan menentukan 2 rentetan "firstName" dan "lastName" dan memaparkannya menggunakan ungkapan yang sesuai.

Guru99 Global Event
   First Name : {{firstName}}
   last Name : {{lastName}}

Penjelasan Kod:

1. Arahan ng-init digunakan menentukan pemboleh ubah nama pertama dengan nilai "Guru" dan pemboleh ubah nama belakang dengan nilai "99".
2. Kami kemudian menggunakan ungkapan {{firstName}} dan {{lastName}} untuk mengakses nilai pemboleh ubah ini dan memaparkannya dalam paparan yang sesuai.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari keluarannya, dapat dilihat dengan jelas bahawa nilai-nilai nama depan dan nama belakang dipaparkan di skrin.

Objek Angular.JS

Ekspresi dapat digunakan untuk bekerja dengan objek JavaScript juga.

Mari kita lihat contoh ungkapan Angular.JS dengan objek javascript. Objek javascript terdiri daripada pasangan nilai-nama.

Di bawah ini adalah contoh sintaks objek javascript.

Sintaks:

var car = {type:"Ford", model:"Explorer", color:"White"};

Dalam contoh ini, kita akan mendefinisikan satu objek sebagai objek orang yang akan mempunyai 2 pasangan nilai kunci "firstName" dan "lastName".

Guru99 Global Event
   First Name : {{person.firstName}}
   Last Name : {{person.lastName}}

Penjelasan Kod:

1. Arahan ng-init digunakan untuk mendefinisikan objek objek yang pada gilirannya mempunyai pasangan nilai utama nama pertama dengan nilai "Guru" dan pemboleh ubah nama belakang dengan nilai "99".
2. Kami kemudian menggunakan ungkapan {{person.firstName}} dan {{person.secondName}} untuk mengakses nilai pemboleh ubah ini dan memaparkannya dalam paparan dengan sewajarnya. Oleh kerana pemboleh ubah anggota sebenarnya adalah bahagian dari objek objek, mereka harus mengaksesnya dengan notasi titik (.) Untuk mengakses nilai sebenar mereka.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari output,

• Dengan jelas dapat dilihat bahawa nilai-nilai "firstName" dan "secondName" dipaparkan di skrin.

Susunan AngularJS

Ungkapan boleh digunakan untuk berfungsi dengan tatasusunan juga. Mari kita lihat contoh ungkapan JS Angular dengan tatasusunan.

Dalam contoh ini, kita akan menentukan array yang akan memegang markah pelajar dalam 3 mata pelajaran. Pada pandangan, kami akan memaparkan nilai tanda ini dengan sewajarnya.

Guru99 Global Event
Student Marks
   Subject1 : {{marks[0] }}
   Subject2 : {{marks[1] }}
   Subject3 : {{marks[2] }}
   

Penjelasan Kod:

1. Arahan ng-init digunakan menentukan susunan dengan nama "markah" dengan 3 nilai 1, 15 dan 19.
2. Kami kemudian menggunakan ungkapan tanda [indeks] untuk mengakses setiap elemen array.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Dari hasilnya, dapat dilihat dengan jelas bahawa tanda yang ditunjukkan, yang ditentukan dalam larik.

Keupayaan dan Batasan Ekspresi AngularJS

Keupayaan Ekspresi Angular.JS

1. Ungkapan sudut adalah seperti ungkapan JavaScript. Oleh itu, ia mempunyai kekuatan dan kelenturan yang sama.
2. Dalam JavaScript, apabila anda cuba menilai sifat yang tidak ditentukan, ia menghasilkan ReferenceError atau TypeError. Dalam sudut, penilaian ekspresi adalah memaafkan dan menghasilkan yang tidak ditentukan atau nol.
3. Seseorang boleh menggunakan penapis dalam ekspresi untuk memformat data sebelum memaparkannya.

Batasan Ekspresi JS sudut

1. Pada masa ini tidak ada ketersediaan untuk menggunakan kondisional, gelung, atau pengecualian dalam ekspresi Sudut
2. Anda tidak dapat menyatakan fungsi dalam ekspresi sudut, bahkan dalam arahan ng-init.
3. Seseorang tidak dapat membuat ungkapan biasa dalam ungkapan Sudut. Ungkapan biasa adalah gabungan simbol dan watak, yang digunakan untuk mencari rentetan seperti. * \. Txt $. Ungkapan sedemikian tidak boleh digunakan dalam ekspresi JS Angular.
4. Juga, seseorang tidak dapat menggunakan, atau membatalkan dalam ungkapan Sudut.

Perbezaan antara ungkapan dan $ eval

Fungsi $ eval membolehkan seseorang menilai ungkapan dari dalam pengawal itu sendiri. Oleh itu, sementara ungkapan digunakan untuk penilaian dalam pandangan, $ eval digunakan dalam fungsi pengawal.

Mari kita lihat contoh ringkas mengenai perkara ini.

Dalam contoh ini,

Kami hanya akan menggunakan fungsi $ eval untuk menambahkan 2 nombor dan membuatnya tersedia dalam objek lingkup sehingga dapat ditunjukkan dalam pandangan.

Guru99 Global Event
{{value}}

Penjelasan Kod:

1. Kami pertama kali menentukan 2 pemboleh ubah 'a' dan 'b', masing-masing memegang nilai 1.
2. Kami menggunakan fungsi $ skop. $ Eval untuk menilai penambahan 2 pemboleh ubah dan menetapkannya ke variabel skop 'nilai'.
3. Kami kemudian hanya memaparkan nilai pemboleh ubah 'nilai' dalam paparan.

Sekiranya kod berjaya dilaksanakan, Keluaran berikut akan ditunjukkan semasa anda menjalankan kod anda di penyemak imbas.

Pengeluaran:

Output di atas menunjukkan output ungkapan yang dinilai dalam pengawal. Hasil di atas menunjukkan bahawa ungkapan $ eval digunakan untuk melakukan penambahan 2 pemboleh ubah skop 'a dan b' dengan hasilnya dikirim dan ditampilkan dalam pandangan.

Ringkasan:

• Kami telah melihat bagaimana ungkapan dalam Angular JS dapat digunakan untuk menilai JavaScript biasa seperti ungkapan seperti penambahan nombor yang mudah.
• Arahan ng-init dapat digunakan untuk menentukan pemboleh ubah sebaris yang dapat digunakan dalam pandangan.
• Ungkapan dapat dibuat untuk berfungsi dengan jenis primitif seperti rentetan dan nombor.
• Ekspresi juga dapat digunakan untuk bekerja dengan jenis lain seperti objek JavaScript dan tatasusunan.
• Ungkapan dalam Angular JS memang mempunyai beberapa batasan seperti misalnya tidak mempunyai ungkapan biasa atau menggunakan fungsi, gelung atau pernyataan bersyarat.