وب گردی
جدیدترین ویدیوها
پربازدیدترین ویدیوها
کانال تلگرام پورتال پادرا

عبارات درAngularJS

عبارات درAngularJS - آموزش AngularJS


تاریخ : دوشنبه,۶ دی ۱۳۹۵ تعداد بازدید :316

AngularJS به وسیله عبارات به داده های Html متصل می شود.

عبارات ANGULARJS را در داخل آکولاد {{}} تعریف می کنند.

همچنین می توان عبارات را داخل یک دستور تعریف کرد:  ng-bind="expression"

عبارت ها در ANGULARJS بسیار شبیه به عبارت ها در جاوا اسکریپت دارند که می توانند شامل لیترال، اپراتورها، و متغیرباشند

{{ 5 + 5 }} یا {{ firstName + " " + lastName }} مثال

 

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


اگر ng در مثال بالا حذف کنید کد بصورت Html ساده نمایش داده می شود.

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

به عنوان مثال: اجازه دهید با استفاده از AngularJS خواص یک Cssرا تغییر دهیم.

مثال :

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

در مثال بالا خاصیت یک Input را به سادگی به رنگ آبی تغییر داده.

 

اعداد درAngularJS :

نحوه تعریف اعداد درست شبیه به جاوااسکرپیت می باشد.

 

مثال:

<div ng-app="" ng-init="quantity=1;cost=5">

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

</div>


رشته ها درAngularJS :

نحوه تعریف رشته ها درست شبیه به جاوااسکرپیت می باشد.

 

مثال:

<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
 

آبجکت ها  درAngularJS :

نحوه تعریف آبجکت ها  درست شبیه به جاوااسکرپیت می باشد.

مثال :

 

<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>

آرایه ها  درAngularJS :

نحوه تعریف آرایه ها درست شبیه به جاوااسکرپیت می باشد.

مثال :

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>

منبع: پورتال پادرا

برچسب ها :





این مقاله را دوست داشتید؟ آنرا به اشتراک بگذارید




دیدگاه




در ارتباط با همین مطلب بخوانید