0
0
0
آموزش AngularJS قسمت پنجم کار Filter ها در AngularJs
آموزش AngularJS قسمت پنجم کار Filter ها در AngularJs
در این قسمت از آموزش AngularJS به مبحث Filter ها در AngularJs می پردازیم.
Filter ها در AngularJs
- Currency
- Filter
- Lowercase
- orderBy
- uppercase
برای اضافه کردن فیلتر از علامت | استفاده می کنیم و بعد از این علامت نوع فیلتر را می نویسیم.
در مثال زیر با استفاده از فیلتر uppercase حروف های کوچک را به حروف های بزرگ تبدیل می کنیم.
<!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="name" />
<p>The name is {{ name | uppercase }}</p>
</div>
</body>
</html>
در مثال زیر با استفاده از فیلتر lowercase حروف های بزرگ را به حروف های کوچک تبدیل می کنیم.
<!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="name" />
<p>The name is {{ name | lowercase }}</p>
</div>
</body>
</html>
در مثال زیر با استفاده از فیلتر currency یک عدد (مبلغ) را به واحد دلار تبدیل می کنیم.
<!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="mony" />
<p>Total Amount {{ mony | currency }}</p>
</div>
</body>
</html>
در مثال زیر که همانند مثال قبلی است با این تفاوت که یک عمل ضرب را با استفاده 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="">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
</body>
</html>
در مثال زیر با استفاده از فیلتر orderBy کشورها را مرتب کردیم.
<!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="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
<script language="javascript">
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
$scope.names = [
{ name: 'Jani', country: 'Norway' },
{ name: 'Hege', country: 'Sweden' },
{ name: 'Kai', country: 'Denmark' }
];
});
</script>
</body>
</html>
در مثال زیر که همانند مثال قبلی است با این تفاوت که فیلتر uppercaseرا نیز روی نام اعمال کردیم.
<!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="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
<script language="javascript">
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
$scope.names = [
{ name: 'Jani', country: 'Norway' },
{ name: 'Hege', country: 'Sweden' },
{ name: 'Kai', country: 'Denmark' }
];
});
</script>
</body>
</html>
این مطلب را به اشتراک بگذارید...
نظر / سوال