در این مقاله، ما با Filter ها در AngularJS آشنا می شویم و آن را دریک برنامه ی ساده پیاده سازی می کنیم و سپس به بررسی آن می پردازیم.

معرفی

ابتدا با ساختار دستوری AngularJS برای مرتب سازی داده ها آشنا می شویم. برای مرتب سازی داده ها در Angular JS ما فیلترها را به شکل زیر استفاده می کنیم:

{{orderby_expression | orderby : expression : reverse}}

همان طور که در ساختار بالا می بینید، این ساختار دو پارامتر expression و reverse را دارد.

توجه: برای مرتب سازی صعودی داده ها مقدار reverse را برابر flase قرار می دهیم. برای مرتب سازی نزولی آن را true می گذاریم. همچنین شما میتوانید از علامت + برای مرتب سازی صعودی و – برای مرتب سازی نزولی استفاده کنید.

در اینجا ما با کمک فیلتر ها در Angular JS به جای نمایش ردیف های متفاوت آنها را به صورت نزولی و صعودی مرتب میکنیم.

مدل ما به شکل زیر است:

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)   
    {  
            var employees = [{  
                    name: "ایمان",  
                    dateOfBirth: new Date("July 21,1960"),  
                    Address: "تهران",  
                    Salary: "1234.34"  
            }, {  
                    name: "سجاد",  
                    dateOfBirth: new Date("July 20,1960"),  
                   Address: "تهران",  
                    Salary: "12.34"  
        }, {  
                name: "علی",  
        dateOfBirth: new Date("July 19,1960"),  
        Address: "کرج",  
        Salary: "1235.34"  
    }, {  
           name: "رضا",  
            dateOfBirth: new Date("July 18,1960"),  
            Address: "شیراز",  
            Salary: "5589.34"  
        }];  
    $scope.employees = employees;  
});  

به طور مشابه در قسمت view ما داده ها را به شکل زیر نمایش میدهیم:

1.	<table>  
2.	    <thead>  
3.	        <tr>  
4.	            <th>نام</th>  
5.	            <th>تاریخ تولد</th>  
6.	            <th>آدرس</th>  
7.	            <th>حقوق</th>  
8.	            <th>حقوق</th>  
9.	        </tr>  
10.	    </thead>  
11.	    <tbody>  
12.	        <tr ng-repeat="employee in employees ">  
13.	            <td>{{employee.name | uppercase }}</td>  
14.	            <td>{{employee.dateOfBirth | date : "dd/MM/yyyy" }}</td>  
15.	            <td>{{employee.Address | lowercase }}</td>  
16.	            <td>{{employee.Salary | number :2 }}</td>  
17.	            <td>{{employee.Salary| currency }}</td>  
18.	        </tr>  
19.	    </tbody>  
20.	</table>  

اکنون اگر برنامه را اجرا کنیم داده ها به شکل زیر نمایش داده می شوند.

در حال حاضر داده ها نه به صورت صعودی و نه به صورت نزولی مرتب نشده اند. بنابراین ، ما این داده ها را مرتب می کنیم. در اینجا ما میخواهیم داده ها را بر اساس فیلد Name به صورت صعودی مرتب کنیم. ما با استفاده از filter ها این مرتب سازی را انجام می دهیم. با قرار دادن Reverse به مقدار false ما نام ها را به صورت صعودی مرتب میکنیم. اگر مقداری برای آن تعیین نکنیم به صورت پیش فرض مقدار آن False است.

<tr ng-repeat="employee in employees|orderBy :'name':false ">

اکنون صفحه را دوباره بارگذاری میکنیم:

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

< tr ng-repeat="employee in employees|orderBy :'name':true ">

اکنون دوباره صفحه را بارگذاری می کنیم.

اکنون میبینید که داده ها به صورت نزولی مرتب شده اند.

همچنین شما میتوانید از + و – نیز استفاده کنید.

< tr ng-repeat="employee in employees|orderBy :'+name'">

دوباره داده ها به صورت صعودی مرتب شده اند:

به طور مشابه،

< tr ng-repeat="employee in employees|orderBy :'+-name'">

در اینجا داده ها به صورت نزولی مرتب شده اند.

اکنون ما یک drop down در صفحه قرار میدهیم تا داده ها بر اساس مقدار drop down به صورت صعودی یا نزولی مرتب شوند. اکنون فقط یک تگ table اضافه کنید و مقدار ng-model را انتخاب و تعیین کنید و سپس propertyای را که میخواهید مرتب سازی بر اساس آن انجام شود را در scope Object قرار دهید.

Sort By : <select ng-model="SortColumn"></select>

اکنون در مدلمان ما scope object را به شکل زیر تعیین میکنیم:

$scope.SortColumn = "name";

ما میخواهیم آن را بر اساس نام مرتب کنیم:

اکنون ما فیلدی را که میخواهیم مرتب سازی بر اساس آن انجام شود را اضافه میکنیم:

1.	<select ng-model="SortColumn">  
2.	  
3.	<option value="name">Namme Asc</option>  
4.	<option value="dateOfBirth">DOB Asc</option>  
5.	<option value="Address">Address</option>  
6.	<option value="-Salary">Salary Desc</option>  
7.	</select>

ما داده ها را برای فیلد های name و DOB و address به صورت صعودی و برای salary به صورت نزولی مرتب میکنیم.

اکنون ما SortColumn  را به section ، tr پاس می دهیم.

مرتب سازی با استفاده از فیلتر به شکل زیر خواهد شد،

< tr ng-repeat="employee in employees|orderBy:SortColumn">

اکنون با اجرا برنامه شما تصویر زیر را مشاهده می کنید:

اکنون دموی زیر را مشاهده کنید تا ببینید ما چگونه داده ها را مرتب میکنیم:

آموزش angular