گروه مقاله : جاوا اسكريپت Java Script
تاريخ انتشار : 1396/04/24 - 16:45
كد :7707
در این آموزش به نحوه تعریف تابع در آنگولارجی اس می پردازیم.
توابع در آنگولارجی اس
AngularJS Expressions
توابع آنگولارجی اس در درون دو براکت نوشته میشوند: {{ expression }}
توابع آنگولارجی اس میتوانند از دستور العمل ng-bind="expression" استفاده کنیم.
آنگولارجی اس توابع داخل براکت ها را حل کرده و نتیجه را در جایی که براکت ها قرار دارند نشان خواهد داد.
توابع در آنگولارجی اس مانند توابع در جاوا اسکریپت است، توابع میتواند دارای مقادیر literalsو عملگرها و متغییر ها باشند.
Example {{ 5 + 5 }} or {{ firstName + " " + lastName }}
مثال:
<!DOCTYPE html>
<html>
<script src="https://sargonco.com/Uploads/Public/article/webdistut/javascript/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://sargonco.com/Uploads/Public/article/webdistut/javascript/angular.min.js "></script>
<body>
<div>
<p>My first expression: {{ 5 + 5 }}</p>
</div>
</body>
</html>
مشاهده نتیجه
شما میتوانید توابع را در هرجا که مایلید درج کنید و مقدار آن را دریافت کنید.
مثال: با استفاده از آنگولارجی اس ویژگی CSS یک تگ را تغییر بدهید. ما میخواهیم کره رنگ تکست باکس را تغییر بدهیم.
مثال
<div ng-app="" ng-init="myCol='lightblue'">
<input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}">
</div>
مشاهده نتیجه
اعداد در آنگولارجی اس
اعداد در آنگولارجی اس
اعداد در آنگولارجی اس مانند اعداد در جاوااسکریپت تعریف میشوند:
مثال:
<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 را معرفی خواهیم کرد.
رشته ها در آنگولارجی اس
رشته ها در آنگولارجی اس مانند رشته ها در جاوا اسکریپت بکار میروند:
مثال
<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>
مشاهده نتیجه
اشیاء در آنگولارجی اس
در مثال زیر نحوه بکارگیری اشیاء در آنگولار جی اس را مشاهده می کنیم:
<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>
مشاهده نتیجه
آرایه ها در آنگولارجی اس
در مثال زیر نحوه بکار گیری آرایه ها در آنگولارجی اس را مشاهده می کنید:
<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>
مشاهده نتیجه