Проблема сортировки в Angular JS

Question

Я использую угловую сортировку js на стороне клиента. И он работает для первого блока, который я вставил ниже. У меня есть один и тот же блок с различным статусом. Я использую концепцию фильтра для отображения List. Но когда я сортирую второй или третий блок, он сортирует первый блок.

<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> 

Пожалуйста, предложите, я новичок в угловом концепции

Мой второй блок

<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> 

Здесь я меняюсь статус только

Answer 1

Это потому, что вы используете ту же модель для сортировка всех блоков:

Вы можете использовать различные модели для retai п порядок в ваших блоках:

<!-- 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')"> 
<!-- ... --> 

Я также хотел бы предложить вам поставить эти заключительные </li> теги, которые я нашел не хватает в вашем коде.