Expression ها آنگولار جی اس – AngularJS
AngularJS داده ها را به HTML با استفاده از عبارات (Expression) متصل می کند.
(Expression) عبارات AngularJS آنگولار جی اس می توانند درون دو عدد براکت نوشته شوند. {{ expression }}.
(Expression) عبارات AngularJS آنگولار جی اس نیز می تواند در یک دستور نوشته شود: ng-bind = “expression”.
AngularJS بیان را برطرف می کند و نتیجه را دقیقا همان جایی که بیان شده است، باز می گرداند.
- (Expression) عبارات AngularJSآنگولار جی اس بسیار شبیه (Expression) عبارتهای جاوااسکریپت هستند: آنها میتوانند حاوی حرف، اپراتور و متغیر باشند.
مثال {{5 + 5}} یا {{firstName + “” + lastName}}
مثال:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div ng-app=""> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html> |
اگر دکمه Ng-app را حذف کنید، HTML آن عبارت را همانطور که هست نمایش میدهد، بدون حل کردن آن:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <body> <div> <p>My first expression: {{ 5 + 5 }}</p> </div> </body> </html> |
شما می توانید عبارات را هر کجا که می خواهید بنویسید، AngularJS به سادگی عبارت را حل کرده و نتیجه را برمی گرداند.
مثال: اجازه دهید AngularJS مقدار خواص CSS را تغییر دهد.
تغییر رنگ جعبه ورودی در زیر با تغییر مقدار آن: با نوشتن نام رنگ درون کادر رنگ آن تغییر می کند.
مثال:
|
1 2 3 4 5 |
<div ng-app="" ng-init="myCol='lightblue'"> <input style="background-color:{{myCol}}" ng-model="myCol"> </div> |
مطالب زیر را حتما مطالعه کنید
مسیریابی انگولار AngularJS Routing
ساخت انیمیشن با انگولار – angularjs animation
AngularJS Includes
api آنگولار جی اس – Angularjs API
اعتبارسنجی فرم ها با آنگولار – AngularJS Form Validation
دیدگاهتان را بنویسید