آموزش AngularJS قسمت پنجم کار Filter ها در AngularJs
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>

دانلود

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

نظر / سوال

Captcha