آانگولار جی ایس ایکسپریشن

آنگولر جی ایس،عبارتدیکھیں HTML پر داده بند کریں。

آانگولار جی ایس ایکسپریشن

آنگولر جی ایس عبارت کو دو بڑی قوسوں میں لکھا جاسکتا ہے:{{ expression }}

آنگولر جی ایس عبارت کو امروں میں بھی لکھا جاسکتا ہے:ng-bind="expression"

آانگولار جی ایس ایکسپریشنآنگولر جی ایس عبارت کو پارسی کرکے عبارت لکھنے کی جگہ پر نتیجہ برآمد کرتا ہے。 جسمانی عبارت: وہ لفظی مقدار، آپریٹر اور متغیرات شامل کرسکتا ہے。

مثال {{ 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 امر، ایچ تی ایم ایل عبارت کو اصل شکل میں نمائش دے گا، اس کو پارسی نہیں کرے گا:

مثال

<!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 مقدار CSS property را تغییر دهد.]}

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

آبی روشن

مثال

<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 معمولاً کم است. شما در فصل مربوط به کنترلرها روش بهتری برای initialize داده‌ها یاد خواهید گرفت.

رشته‌های AngularJS

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

مثال

<div ng-app="" ng-init="firstName='Bill';lastName='Gates'">
<p>نام <span ng-bind="firstName + " " + lastName"></span> است</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>نام <span ng-bind="person.lastName"></span> است</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>

خود کو کوشش کریں

آانگولار جی ایس ایکسپریشن اور جاوا اسکریپٹ ایکسپریشن

جاوا اسکریپٹ ایکسپریشن کی طرح، آانگولار جی ایس ایکسپریشن میں لفظی مقدار، آپریٹر اور متغیرات شامل کئے جاسکتے ہیں۔

جاوا اسکریپٹ ایکسپریشن سے فرق کے باوجود، آانگولار جی ایس ایکسپریشن میں ایچ تی ایمل کے اندر لکھا جاسکتا ہے۔

آانگولار جی ایس ایکسپریشن کو شرط جملات، حلچک وغیرہ نہیں کا دعوی کرسکتا، جبکہ جاوا اسکریپٹ ایکسپریشن اس کا دعوی کرسکتا ہے۔

آانگولار جی ایس ایکسپریشن فیلٹر کا تعاون کرتا ہے، جبکہ جاوا اسکریپٹ ایکسپریشن نہیں کرتا ہے۔

جس میں ہماری جاوا اسکریپٹ تعلیمات میں سے معلومات حاصل کرسکتے ہیں، جاوا اسکریپٹ کے بارے میں معلومات حاصل کریں۔