آموزش AngularJS قسمت دوم کار با Expression ها در AngularJS
0 0

آموزش AngularJS قسمت دوم کار با Expression ها در AngularJS


آموزش AngularJS قسمت دوم کار با Expression ها در AngularJS

در قسمت قبلی نحوه استفاده و نصب AngularJS توضیح دادیم. در این قسمت به مبحث Expression ها در AngularJs می پردازیم.

Expression ها در AngularJS

در مثال زیر با استفاده از Expression ها عملیات جمع، تفریق، ضرب و تقسیم را انجام دادیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <p>The First Expression <span>{{5+10}}</span></p>
    </div>
</body>
</html>

در مثال زیر ابتدا توسط دایرکتیو ng-init دو متغیر تعریف و مقدار دهی اولیه کردیم و سپس عمل ضرب را انجام دادیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="quantity=2;cost=5">
        <p>Total in dollar: {{ quantity * cost }}</p>
    </div>
</body>
</html>

در مثال زیر می توان با استفاده از دایرکتیو ng-bind نیز عمل ضرب را انجام داد.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="quantity=2;cost=5">
        <p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
    </div>
</body>
</html>

در مثال زیر ابتدا دو رشته را از طرق تگ های input دریافت کردیم و سپس این دو رشته را به هم متصل کردیم.

نکته:

در این مثال نوع input ها از نوع text تعریف کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <input type="text" ng-model="a" />
        <input type="text" ng-model="b" />
        <p>Result: {{ a + b }}</p>
    </div>
</body>
</html>

در مثال زیر ابتدا دو عدد را از طرق تگ های input دریافت کردیم و سپس دو عدد را به هم جمع کردیم.

نکته:

در این مثال نوع input ها از نوع number تعریف کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="">
        <input type="number" ng-model="a" />
        <input type="number" ng-model="b" />
        <p>Result: {{ a + b }}</p>
    </div>
</body>
</html>

در مثال زیر ابتدا دو متغیر firstName و lastName تعریف کردیم و سپس توسط Expression نمایش دادیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
        <p>The name is {{firstName+" "+lastName }}</p>
    </div>
</body>
</html>

در مثال زیر که همانند مثال قبلی است با این تقاوت که به جای Expression ها از ng-bind استفاده کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="firstName='John';lastName='Doe'">
        <p>The name is <span ng-bind="firstName+' '+lastName"></span></p>
    </div>
</body>
</html>

آبجکت ها در AngularJS

در مثال زیر برای تعریف آبجکت ها ابتدا نام آبجکت را داخل ng-init تعریف می کنیم و سپس پراپرتی و مقدار آن را مشخص می کنیم.

برای نمایش یکی از مقدارهای آبجکت، نام آبجکت را می نویسیم و سپس نام پراپرتی را می نویسیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
        <p>The name is {{ person.lastName }}</p>
    </div>
</body>
</html>

در مثل زیر که همانند مثال قبلی است با این تفاوت که هنگام نمایش به جای Expression ها از ng-bind استفاده کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
        <p>The name is <span ng-bind="person.lastName"></span></p>
    </div>
</body>
</html>

آرایه ها در AngularJS

در مثال زیر ابتدا یک آرایه عددی به نام points تعریف کردیم و سپس توسط Expression ها خانه دوم آرایه را نمایش دادیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="points=[1,15,19,2,40]">
        <p>The third result is {{ points[2] }}</p>
    </div>
</body>
</html>

در مثل زیر که همانند مثال قبلی است با این تفاوت که هنگام نمایش به جای Expression ها از ng-bind استفاده کردیم.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>-->
    <script src="angular.min.js"></script>
</head>
<body>
    <div ng-app="" ng-init="points=[1,15,19,2,40]">
        <p>The third result is <span ng-bind="points[2]"></span></p>
    </div>
</body>
</html>

دانلود

نویسنده حسین فتحی
گروه مطلب AngularJS
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۳ مرداد ۱۳۹۴
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران عضو سایت
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha

این صفحه را می‌پسندم