آموزش گام به گام AngularJS قسمت سوم : کار با Filtering و Sorting

بازدید کنندگان : 1596 دسته بندی برنامه نویسی , برنامه نویسی سمت کلاینت , شروع کار با AngularJS
در مقاله قبل با فرمان ng-repeat و کنترل ها آشنا شدیم ، در این مقاله کمی پا را فراتر گذاشته و به تولید یک جدول از اطلاعات و فیلتر کردن و مرتب سازی آن میپردازیم .
برای شروع یک آرایه از اطلاعات که به صورت JSON بوده در یک متغیر ذخیره کرده و سپس متغیر را به یک Table بایند میکنیم .
در مرحله بعد از طریق filter یک جستجوی ساده در جدول انجام خواهیم داد .
 
ابتدا به کمک ng-repeat و Table یک جدول از اطلاعات را به یک آرایه دوبعدی با فرمت JSON بایند می کنیم :
  $scope.myData=[ 
         {name:'Ali',family:'Delshad'}, 
     {name:'Hamid',family:'Sadeghi'}, 
     {name:'Amir',family:'Olfat'}, 
     {name:'Keyvan',family:'Nasr'}     
     ]; 
 و برای بایند کردن جدول خیلی ساده از ng-repeat استفاده میکنیم :
<table>

<tr>

<td>Name</td>

<td>Family</td>

</tr>

<tr ng-repeat="row in myData">

<td>{{row.name}}</td>

<td>{{row.family}}</td>

</tr>

</table>
دقت کنید که از آنجایی که دیتا به صورت JSON است ابتدا اسم متغیر و سپس نام پارامتر ذکر شده است : row.name 
سپس برای  فیلتر کردن اطلاعات  یک کاراکتر i سپس کلمه filter ذکر شده و مقداری که قرار است فیتلر شود معرفی میگردد ، به 
عنوان مثال اگر بخواهیم اطلاعات جدول که توسط ng-repeat بایند شده است را به شکلی فیلتر کنیم که حتما حرف i داخل آن باشد :
<tr ng-repeat="row in myData | filter:'i' ">
و اگر به جای حرف i یک مدل مثل input را معرفی کنیم بر اساس مقدار وارد شده در input فیلتر انجام خواهد شد :
<p> Search : <input type="text" ng-model="search"  /> </p> 
 
<tr ng-repeat="row in myData | filter:search"> 
اگر بخواهیم یک مرتب سازی ایجاد کنیم از کلیدواژه orderBy استفاده میکنیم ، کافیست بعد از کاراکتر | کلیدواژه نوشته شده و در 
مقابل ستون مرتب سازی معرفی شود :
<tr ng-repeat="row in myData | filter:search | orderBy:'name' ">
کد فوق جدول را بر اساس ستون name مرتب میکند ، حال اگر بخواهیم کمی حرفه تر عمل کنیم و با کلیک بر روی هر ستون مرتب 
سازی انجام شود ، کافیست به جای مقدار name در بالا orderBy را به یک مدل مثلا sortOrder بایند کنیم ، مقدار sortOrder نیز 
هنگام کلیک بر روی ستون ها مشخص میشود پس از طریق ng-click برای هر ستون sortOrder را مقدار دهی می کنیم ، بنابراین 
کد ما به شکل زیر خواهد بود :
 


همانطور که میبینید با کلیک بر روی هر ستون مدل sortOrder مقدار دهی شده و از چون orderBy به sortOrder بایند شده است همان لحظه ترتیب مرتب سازی جدول تغییر میکند .

اگر بخواهیم جهت مرتب سازی را عوض کنیم باید پارامتر reverse را مقدار دهی کنیم اگر true باشد جهت مرتب سازی Descending خواهد شد :
<tr ng-repeat="row in myData | filter:search | orderBy:'name':true ">
همچنین میتوانیم به جای true: قبل از name یک - قرار دهیم :
 
<tr ng-repeat="row in myData | filter:search | orderBy:'-name'">
  در مقالعه بعد با اعتبار سنجی ( Validation ) آشنا خواهید شد.
 
 

نظرات کاربران