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>
این مطلب را به اشتراک بگذارید...
نظر / سوال