ການສະແດງສະບັບ AngularJS
AngularJS ຈະExpressionການມັດຂໍ້ມູນຫາHTML。
ການສະແດງສະບັບ AngularJS
AngularJS Expressionສາມາດຂຽນໃນຄຳສັບວຽກງານທີ່ມີສອງຄຳສວຍສາຍທີ່ໃຫຍ່:{{ expression }}。
AngularJS Expressionສາມາດຂຽນໃນຄຳສັນຍາບັນກໍ່ຕາມ:ng-bind="expression"。
AngularJSຈະການຄຳສັບຄຳສັບແລະກັບຄືນຜົນຢ່າງງ່າຍດາຍໃນບ່ອນທີ່ທ່ານຂຽນຄຳສັບ.
ການສະແດງສະບັບ AngularJSຄືກັນ JavaScript Expressionພວກມັນສາມາດມີຄຳສັບມາດດາຍຫຼາຍທີ່ບໍ່ມີຄຳສັບທາງວຽກງານລະບົບ.
ຕົວຢ່າງ: {{ 5 + 5 }} ຫຼື {{ firstName + " " + lastName }}
ຄວາມຄິດຫວັງ
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
<p>ຄຳສັບຂອງຂ້ອຍຄັ້ງທຳອິດ: {{ 5 + 5 }}</p>
</body>
</html>
亲自试一试
ຖ້າເອົາ ng-app ຄຳສັບສັນຍາບັນHTMLຈະສະແດງຄຳສັບເປັນຕົວເລື່ອງຫຼາຍທີ່ບໍ່ຈະການການຄຳສັບ:
ຄວາມຄິດຫວັງ
<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div>
<p>ຄຳສັບຂອງຂ້ອຍຄັ້ງທຳອິດ: {{ 5 + 5 }}</p>
</body>
</html>
亲自试一试
ທ່ານສາມາດຂຽນຄຳສັບໃນບ່ອນທີ່ທ່ານມັກຢູ່ໄດ້ແລະAngularJSຈະການການຄຳສັບຄວາມແລະກັບຄືນຜົນຢ່າງງ່າຍດາຍ。
ຄວາມຄິດຫວັງ: ອະນຸຍາດ AngularJS ທີ່ຈະປ່ຽນຄູ່ມູນຂອງ CSS Property.
ປ່ຽນຄູ່ມູນຂອງຂໍ້ມູນດັ່ງກ່າວເພື່ອປ່ຽນສີຂອງບັນນາທິການກາງ:
ສີສັນຍາວ
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
亲自试一试
ວິດີຖານ AngularJS Number
ວິດີຖານ AngularJS Number ແມ່ນຄືວິດີຖານ JavaScript Number:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="quantity=1;cost=5">
<p>ຈຳນວນລາຍຈ່າຍ (USD)：{{ quantity * cost }}</p>
亲自试一试
ນຳໃຊ້ ng-bind ຄວາມຄິດຫວັງດຽວກັນ:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="quantity=1;cost=5">
<p>ຈຳນວນລາຍຈ່າຍ (USD)：<span ng-bind="quantity * cost"></span></p>
亲自试一试
ການນຳໃຊ້ ng-init ບໍ່ໄດ້ຮັບການນຳໃຊ້ຫຼາຍ. ທ່ານຈະຮຽນວິທີທີ່ດີຫຼາຍຂອງການລິກິດຂໍ້ມູນໃນຫົວຂໍ້ກຳລັງຄວາມຄວາມຄິດ.
ວິດີຖານ AngularJS String
ວິດີຖານ AngularJS String ແມ່ນຄືວິດີຖານ JavaScript String:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>ຊື່ວ່າ {{ firstName + " " + lastName }}</p>
亲自试一试
ຄວາມຄິດຫວັງທີ່ຈະນຳໃຊ້ ng-bind:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>ຊື່ວ່າ <span ng-bind="firstName + ' ' + lastName"></span></p>
亲自试一试
ວິດີຖານ AngularJS Object
ວິດີຖານ AngularJS Object ແມ່ນຄືວິດີຖານ JavaScript Object:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>ຊື່ວ່າ {{ person.lastName }}</p>
亲自试一试
ຄວາມຄິດຫວັງທີ່ຈະນຳໃຊ້ ng-bind:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>ຊື່ວ່າ <span ng-bind="person.lastName"></span></p>
亲自试一试
ວິດີຖານ AngularJS Array
ວິດີຖານ AngularJS Array ແມ່ນຄືວິດີຖານ JavaScript Array:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>ຜົນການຄົ້ນຄືນທີສາມຢູ່ {{ points[2] }}</p>
亲自试一试
ຄວາມຄິດຫວັງທີ່ຈະນຳໃຊ້ ng-bind:
ຄວາມຄິດຫວັງ
<div ng-app="" ng-init="points=[1,15,19,2,40]">
The third result is
亲自试一试
AngularJS 表达式与 JavaScript 表达式
与 JavaScript 表达式类似，AngularJS 表达式可以包含字面量、运算符和变量。
与 JavaScript 表达式不同，AngularJS 表达式可以写在 HTML 内部。
AngularJS 表达式不支持条件语句、循环和异常，而 JavaScript 表达式则支持。
AngularJS 表达式支持过滤器，而 JavaScript 表达式则不支持。
在我们的 JavaScript 教程中了解有关 JavaScript 的信息。
