عبارات در AngularJS

AngularJS با استفاده از عبارت ها داده ها را در خروجی نمایش میدهد.

عبارات در AngularJS

  • عبارات در AngularJS می توانند در دبل براکت نوشته شوند به این صورت که  {{ expression }} .
  • عبارت در AngularJS می تواند در directive بصورت زیر نوشته شود ng-bind="experssion

عبارات در  AngularJS  بسیار شبیه عبارات در JavaScript می باشد که شامل لیترال ها ، اپراتور ها و متغیر هاست . به عنوان مثال {{ 5 + 5 }} یا {{ firstname +" " +  lastname }}

مثال
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
مشاهده مثال

اگر شما  ng-app را حذف کتید ، HTML  بدون اینکه عبارات را حل کند ، دقیقا موارد درون عبارات را نمایش می دهد.

مثال
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div>
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>
مشاهده مثال

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

به عناون مثال : می توانید توسط AngularJS مقادیر مربوط به متغیر های CSS را تغییر دهید و مقدار دهی کنید.

در زیر میتوانید با تغییر نام رنگ در باکس مربوطه رنگ باکس را تغییر دهید.

مثال
<div ng-app="" ng-init="myCol='lightblue'">

<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">

</div>
مشاهده مثال

اعداد در AngularJS

اعداد در AngularJS شبیه اعداد در JavaScript می باشند.

مثال
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: {{ quantity * cost }}</p>

</div> 
مشاهده مثال

همین طور می توانید از ng-bind استفاده کنید :

مثال
<div ng-app="" ng-init="quantity=1;cost=5">

<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>

</div>
مشاهده مثال

نکته : استفده از ng-init متداول نیست. در ادامه روش های بهتری برای مقداردهی به متغیر ها به شما ارئه خواهد شد.

رشته ها در AngularJS

رشته ها در AngularJS شبیه رشته در JavaScript می باشند.

مثال
<div ng-app="" ng-init="firstName='John';lastName='Doe'">

<p>The name is {{ firstName + " " + lastName }}</p>

</div> 
مشاهده مثال

همین طور می توانید از ng-bind استفاده کنید :

مثال
≪div ng-app="" ng-init="firstName='John';lastName='Doe'">

≪p>The name is ≪span ng-bind="firstName + ' ' + lastName">≪/span>≪/p>

≪/div> 
مشاهده مثال

آبجکها در AngularJS

آبجکت ها در AngularJS شبیه آبجکت ها در JavaScript می باشند.

مثال
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is {{ person.lastName }}</p>

</div> 
مشاهده مثال

همین طور می توانید از ng-bind استفاده کنید :

مثال
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">

<p>The name is <span ng-bind="person.lastName"></span></p>

</div> 
مشاهده مثال

آرایه ها در AngularJS

آرایه ها در AngularJS شبیه آرایه ها در JavaScript می باشند.پ

مثال
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is {{ points[2] }}</p>

</div> 
مشاهده مثال

همین طور می توانید از ng-bind استفاده کنید :

مثال
<div ng-app="" ng-init="points=[1,15,19,2,40]">

<p>The third result is <span ng-bind="points[2]"></span></p>

</div> 
مشاهده مثال

تفاوت ها و شباهت های عبارات AngularJS و عبارات JavaScript

همانند عبارات JavaScript ، عبارات AngularJS  می تواندد شامل لیترال ها ، اپراتور ها و متغیر ها باشند.

همانند عبارات JavaScript ، عبارات AngularJS می توانند درون کد های HTML نوشته شوند.

عبارات AngularJS شرط ها  ، حلقه ها و استثنا ها  را پشتیبانی نمی کنند ولی JavaScript همه این ها را پشتیبانی می کند.

 

شما می توانید درس های JavaScript را در آموزش های دوره ای JavaScript دنبال کنید.

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط