Sorting issue in Angular JS

Question

I am using client side angular js sorting .And it is working for first block which i pasted below .I have same kind of four block with different status.I am using filter concept for displaying List . But when i am sorting with second or third block it is sorting the first block.

<ul class="unstyled listResultsAlignment itemdis{{(items|filter:{status:&quot;WCH&quot;}).length}}">
    <li><span class="span3">SORT BY : </span> 

    <select data-ng-model="sortorder" class="span6 itemselect">
    <option disabled value="">Choose one</option>
    <option value="createDateTime">Most Recent</option>                 
    <option value="title">Title</option>
    <option value="createdBy">Created By</option>                   
    </select>


    </li>
    <li>
    <div class="item-list: list" data-ng-repeat="item in items | filter:{status:&quot;WCH&quot;} | orderBy:sortorder" data-ng-click="displayDossierItem('WCH')">
    </div>
    </ul>

Please suggest ,i am new to angular concept

My second block

<ul class="unstyled listResultsAlignment itemdis{{(items|filter:{status:&quot;POI&quot;}).length}}">
    <li><span class="span3">SORT BY : </span> 

    <select data-ng-model="sortorder" class="span6 itemselect">
    <option disabled value="">Choose one</option>
    <option value="createDateTime">Most Recent</option>                 
    <option value="title">Title</option>
    <option value="createdBy">Created By</option>                   
    </select>


    </li>
    <li>
    <div class="item-list: list" data-ng-repeat="item in items | filter:{status:&quot;WCH&quot;} | orderBy:sortorder" data-ng-click="displayDossierItem('WCH')">
    </div>
    </ul>

Here i am changing status only

AlwaysALearner · Accepted Answer · 2013-08-16 07:08:34Z

1

This is because you are using the same model for sorting all the blocks:

You can use different models to retain the order in your blocks:

<!-- 1st block -->
<select data-ng-model="sortorder1" class="span6 itemselect">
<!-- ... -->
<div class="item-list: list" data-ng-repeat="item in items | 
filter:{status'WCH'} | orderBy:sortorder1" 
data-ng-click="displayDossierItem('WCH')">
<!-- ... -->

<!-- 2nd block -->
<select data-ng-model="sortorder2" class="span6 itemselect">
<!-- ... -->
<div class="item-list: list" data-ng-repeat="item in items | 
filter:{status:'WCH'}   | orderBy:sortorder2" 
data-ng-click="displayDossierItem('WCH')">
<!-- ... -->

I would also suggest you to put those closing </li> tags that I found missing in your code.

edited Aug 16, 2013 at 7:08

answered Aug 16, 2013 at 7:02

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prashobh Over a year ago

I tried this solution , First block is working ,But second block is not sorting

AlwaysALearner Over a year ago

@prash Did you exactly do as shown? ng-model="sortorder2" and orderBy:sortorder2 ?

Collectives™ on Stack Overflow

Sorting issue in Angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related