عبارات AngularJS

صفحه قبلی مقدمه‌ای بر AngularJS
صفحه بعدی مодуل‌های AngularJS

AngularJS از طریقعبارتداده‌ها را به HTML متصل می‌کند.

عبارات AngularJS

عبارت‌های AngularJS می‌توانند در دو گوشه بزرگ نوشته شوند:{{ expression }}.

عبارت‌های AngularJS نیز می‌توانند در دستورالعمل‌ها نوشته شوند:ng-bind="expression".

AngularJS عبارت را تحلیل کرده و در مکانی که عبارت نوشته شده است، نتیجه را بازمی‌گرداند.

عبارات AngularJSمانند عبارت‌های JavaScriptآن‌ها می‌توانند شامل مقدارهای عددی، عملگرها و متغیرها باشند.

مثال {{ 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>
</div>
</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>
</div>
</body>
</html>

به طور مستقیم امتحان کنید

شما می‌توانید در هر مکانی که دوست دارید، عبارت را بنویسید و AngularJS به سادگی آن را تحلیل کرده و نتیجه را بازمی‌گرداند.

مثال: اجازه دهید AngularJS مقدار ویژگی CSS را تغییر دهد.}

برای تغییر رنگ این فیلد ورودی، مقدار آن را تغییر دهید:

آبی روشن

مثال

<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

به طور مستقیم امتحان کنید

اعداد AngularJS

اعداد AngularJS مانند اعداد JavaScript هستند:

مثال

<div ng-app="" ng-init="quantity=1;cost=5">
<p>مجموع مبلغ (دلار): {{ quantity * cost }}</p>
</div>

به طور مستقیم امتحان کنید

استفاده از ng-bind مثال مشابه:

مثال

<div ng-app="" ng-init="quantity=1;cost=5">
<p>مجموع مبلغ (دلار): <span ng-bind="quantity * cost"></span></p>
</div>

به طور مستقیم امتحان کنید

استفاده از ng-init کمتر رایج است. شما در فصل مربوط به کنترلرها روش بهتری برای�始化 داده‌ها یاد خواهید گرفت.

رشته‌های AngularJS

رشته‌های AngularJS مانند رشته‌های JavaScript هستند:

مثال

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>نام است {{ firstName + " " + lastName }}</p>
</div>

به طور مستقیم امتحان کنید

مثال مشابهی از استفاده از ng-bind:

مثال

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>نام است <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>

به طور مستقیم امتحان کنید

اجسام AngularJS

اجسام AngularJS مانند اجسام JavaScript هستند:

مثال

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>نام است {{ person.lastName }}</p>
</div>

به طور مستقیم امتحان کنید

مثال مشابهی از استفاده از ng-bind:

مثال

<div ng-app="" ng-init="person={firstName:'Bill',lastName:'Gates'}">
<p>نام است <span ng-bind="person.lastName"></span></p>
</div>

به طور مستقیم امتحان کنید

آرایه‌های AngularJS

آرایه‌های AngularJS مانند آرایه‌های JavaScript هستند:

مثال

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>نتیجه سوم است {{ points[2] }}</p>
</div>

به طور مستقیم امتحان کنید

مثال مشابهی از استفاده از ng-bind:

مثال

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>نتیجه سوم<span ng-bind="points[2]"></span></p>
</div>

به طور مستقیم امتحان کنید