بررسی فیلتر ها در فریم ورک AngularJS

بررسی فیلتر ها در فریم ورک AngularJS

در این پست از وبسایت پرووید، در رابطه با بررسی ماژوال ها در فریم ورک AngularJS صحبت خواهیم کرد. به ادامه ی مطلب بروید.

در این قسمت از این آموزش از وب سایت پرووید که بخشی از سری آموزش کامل AngularJS  می باشد، در رابطه با فیلترها در AngularJS صحبت خواهیم کرد.

بسته ی آموزش ویدئویی شروع به کار با Angular 2

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی شروع به کار با Angular 2 دیدن کنید.

با استفاده از فیلترها در AngularJS می توانید قالب و یا فرمت داده ها را تغییر بدهید، این موضوع باعث می شود تا بتوانید در UI برنامه، بدون تغییر دادن فرمت اصلی یک داده ظاهر آن را جذاب تر و یا مناسب تر نمایید.

از فیلترها می توان در کنار یک Expression و یا یک Directive استفاده کرد. برای استفاده از فیلترها از علامت | که به آن لوله و یا Pipe می گویند استفاده می کنیم. این موضوع در کد زیر نشان داده شده است.

 {{expression | filterName:parameter }} 

در AngularJS فیلترهای متعددی برای تغییر فرمت و یا قالب داده ها موجود است. جدولی که در قسمت زیر مشاهده می کنید برخی از فیلترها را نشان می دهد.

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular 2 و ASP.NET Core دیدن کنید.

بررسی فیلتر Number

با استفاده از فیلتر Number می توانید یک داده عددی را در فرمت یک Text با استفاده از کاما و همچنین تعداد اعداد اعشار نشان بدهید. نحوه استفاده از فیلتر Number در کد زیر نشان داده شده است.

{{ number_expression | number:fractionSize}}

اگر Expression مشخص شده در سمت چپ، یک داده عددی معتبر را Return نکند، فیلتر Number یک رشته خالی را تولید خواهد کرد. کدی که در قسمت زیر مشاهده می کنید نحوه استفاده از فیلتر Number را در کنار یک Expression و همچنین یک Property از Model نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app >
    Enter Amount: <input type="number" ng-model="amount" /> <br />

    100000 | number = {{100000 | number}} <br />
    amount | number = {{amount | number}} <br />
    amount | number:2 = {{amount | number:2}} <br />
    amount | number:4 = {{amount | number:4}} <br />
    amount | number = <span ng-bind="amount | number"></span>
</body>
</html>

بررسی فیلتر Currency

با استفاده از فیلتر Currency می توانیم یک داده عددی را در قالب یک Currency نشان بدهیم. منظور از Currency فرمت داده های مالی و پولی می باشد. اگر هیچ علامت Currency مشخص نشده باشد، علامت پیش فرض مربوط به Locale مورد استفاده قرار خواهد گرفت. نحوه استفاده از فیلتر Currency شبیه به کد زیر می باشد.

{{ expression | currency : 'currency_symbol' : 'fraction'}}

بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core

از شما دعوت می کنیم که از بسته ی آموزش ویدئویی ساخت وب اپلیکیشن Full-stack با Angular و ASP.NET Core و EF Core دیدن کنید.

مثالی که در قسمت زیر مشاهده می کنید، نحوه استفاده کردن از این فیلتر را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Default currency: {{person.salary | currency}} <br />
        Custom currency identifier: {{person.salary | currency:'Rs.'}} <br />
        No Fraction: {{person.salary | currency:'Rs.':0}} <br />
        Fraction 2: <span ng-bind="person.salary| currency:'GBP':2"></span>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
            $scope.person = { firstName: 'James', lastName: 'Bond', salary: 100000}
        });
    </script>
</body>
</html>

خروجی این کد شبیه به تصویر زیر خواهد بود.

درمثال بالا ما فیلتر Currency به person.salary اضافه کردیم که حاوی یک داده عددی است. با استفاده از فیلتر Currency می توانیم این داده عددی را با علائم Currency مختلف و همچنین اعشار مختلف نشان بدهیم.

بررسی فیلتر Date‎

با استفاده از فیلتر Date می توانیم یک داده از نوع Date را به یک داده از نوع String کنیم. نحوه استفاده از این فیلتر به شکل زیر است.

 {{ date_expression | date : 'format'}} 

کدی که در قسمت زیر مشاهده می کنید، نحوه استفاده از این فیلتر را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <div ng-init="person.DOB = 323234234898">
        Default date: {{person.DOB| date}} <br />
        Short date: {{person.DOB| date:'short'}} <br />
        Long date: {{person.DOB | date:'longDate'}} <br />
        Year: {{person.DOB | date:'yyyy'}} <br />
    </div>
</body>
</html>

خروجی این کد شبیه به تصویر زیر خواهد بود.

بررسی فیلترهای Uppercase و Lowercase

همان طور که از نام آن ها نیز مشخص است فیلترهای Uppercase و Lowercase یک String را به حروف بزرگ و کوچک تبدیل می کنند. این موضوع در کد زیر نشان داده شده است.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app>
    <div ng-init="person.firstName='James';person.lastName='Bond'">
        Lower case: {{person.firstName + ' ' + person.lastName | lowercase}} <br />
        Upper case: {{person.firstName + ' ' + person.lastName | uppercase}} 
    </div>
</body>
</html>

خروجی این کد شبیه به تصویر زیر خواهد بود.

بررسی فیلتر Filter

با استفاده از فیلتر Filter، می توانیم تعدادی از داده ها یا عناصر درون یک آرایه را بر اساس یک شرط مشخص انتخاب کرده و در قالب یک آرایه جدید آن ها را Return کنیم. نحوه استفاده از این فیلتر در قسمت زیر نشان داده شده است.

 {{ expression | filter : filter_criteria }} 

علاوه بر این، مثالی که در قسمت زیر می بینید، نحوه استفاده از این فیلتر را نشان می دهد.

<!DOCTYPE html>
<html >
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        Enter Name to search: <input type="text" ng-model="searchCriteria" /> <br />
        Result: {{myArr | filter:searchCriteria}} 
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
            $scope.myArr = ['Steve', 'Bill', 'James', 'Rob', 'Ram', 'Moin']
        });
    </script>
</body>
</html>

کدی که در قسمت بالا مشاهده می کنید، از یک داده رشته ای به  نام searchCriteria  استفاده کرده است. این داده توسط کاربر در درون یک Input Box وارد می شود و پس از آن برای فیلتر عناصر مربوط به یک آرایه با نام myArr استفاده خواهد شد.

بررسی فیلتر orderBy

با استفاده از فیلتر orderBy می توانیم عناصر درون یک آرایه را با استفاده از یک شرط مشخص مرتب کنیم. کدی که در قسمت زیر مشاهده می کنید، نحوه استفاده از این فیلتر را نشان می دهد.

 {{ expression | orderBy : predicate_expression : reverse}} 

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

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <select ng-model="SortOrder">
            <option value="+name">Name (asc)</option>
            <option value="-name">Name (dec)</option>
            <option value="+phone">Phone (asc)</option>
            <option value="-phone">Phone (dec)</option>
        </select>
        <ul ng-repeat="person in persons | orderBy:SortOrder">
            <li>{{person.name}} - {{person.phone}}</li>
        </ul>
    </div>
    <script>
        var myApp = angular.module('myApp', []);
        
        myApp.controller("myController", function ($scope) {
        
            $scope.persons = [{ name: 'John', phone: '512-455-1276' },
                         { name: 'Mary', phone: '899-333-3345' },
                         { name: 'Mike', phone: '511-444-4321' },
                         { name: 'Bill', phone: '145-788-5678' },
                         { name: 'Ram', phone: '433-444-8765' },
                         { name: 'Steve', phone: '218-345-5678' }]
            
            $scope.SortOrder = '+name';
        });
    </script>
</body>
</html>

در کد بالا یک لیست از نام افراد و همچنین شماره تماس آن ها را با یک ترتیب مشخص با استفاده از فیلتر orderBy:SortOrder مرتب کرده ایم. پروپرتی SortOrder که در درون مدل تعریف شده است، از درون یک  DropDownList انتخاب می شود که مشخص کننده نحوه مرتب کردن عناصر است. بنابراین براساس مقدار درون SortOrder با استفاده از ng-repeat داده ها با ترتیب مشخص شده نشان داده می شود.

امیدواریم که این آموزش از وبسایت پرووید نیز مورد توجه تمامی دوستان عزیز قرار گرفته باشد. از شما دعوت می‌کنیم که از دیگر آموزش های ما در رابطه با فریم ورک Angular استفاده کنید. لیست کامل این آموزش ها را می توانید در پست مربوط به آموزش کامل برنامه نویسی تحت وب با Angular مشاهده کنید.

مرتضی گیتی
بدون نظر

ارسال نظر

نظر
نام
ایمیل
وب سایت