expression ها در angular

از Expressions برای نمایش عبارات محاسباتی در عناصر HTML استفاده می شود. Expression داخل علامت های {{ }} قرار می گیرد و نتیجه آن درون تگ مورد نظر نمایش داده می شود. عملکرد Expression همانند ng-bind بوده و در وبسایت هایی مانند فروشگاه اینترنتی موجب افزایش تعامل کاربر با سایت می شود.

نحوه استفاده

برای استفاده از Expression کافی است در محلی که قصد دارید نتیجه نمایش داده شود به جای ng-bind، عبارت مورد نظر را درون علامت های ذکر شده قرار دهید.

<div ng-app="">
    <p>Result: {{10 + 15}}</p>
</div>

همچنین شما می توانید توسط ng-init متغیرهایی ها هنگام اجرای اپلیکیشن جهت استفاده در Expression، ایجاد و مقداردهی نمایید. مقداردهی متغیرهایی که در ng-init تعریف می شوند با علامت مساوی انجام شده و بین متغیرهای مختلف علامت ; قرار می گیرد.

<div ng-app="" ng-init="num1=25;num2=30">
    <p>Result: {{num1 + num2}}</p>
</div>

علاوه بر اعداد، می توان از محتوای متنی نیز در Expression استفاده نمود.

<div ng-app="" ng-init="firstName='Beno';lastName='Academy'">
    <p>Your Name: {{firstName + lastName}}</p>
</div>

نکته: کل مقدار ng-init درون علامت های " " قرار میگیرد و هنگامی که قصد داشته باشید درون یک متن از محتوای متنی دیگری استفاده کنید، متن داخلی می بایست درون علامت های ' ' قرار می گیرد.

Objects

object ها در Angular همانند جاوا اسکریپت بوده و به راحتی قابل استفاده می باشند.

<div ng-app="" ng-init="person={firstName:'Beno',lastName:'Academy'}">
    <p>Your Name: {{person.firstName + person.lastName}}</p>
</div>

یاد آوری: مقداردهی فیلدهای object با علامت : انجام شده و بین فیلدها از , استفاده می شود.

آرایه ها

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

<div ng-app="" ng-init="projects=['Beno','Razhis','Cappna','Yardim']">
    <p>Current Project: {{projects[1]}}</p>
</div>

مثال: صفحه ای طراحی کنید که تعداد و قیمت کالا را دریافت کرده و قیمت نهایی را نمایش دهد.

<!DOCTYPE html>
<html>
    <head>
        <title>Beno Academy | Angular Tutorial</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> 
    </head>
    <body>
        <div ng-app="" ng-init="count=0;price=0">
            <div>
                Count : <input type="text" ng-model="count" />
                Price: <input type="text" ng-model="price" />
            </div>
            <p>Total : {{price * count}}</p>
        </div>
    </body>
</html>

 در این مثال متغیرهای count و price توسط ng-init مقداردهی اولیه شده اند، در صورتیکه این کار انجام نشود، قبل از ورود اطلاعات پیغام خطای NaN در مقابل عبارت Total نمایش داده خواهد شد.