javascript - Angular JS中的排序问题

Question

我正在使用客户端角度 js 排序。它适用于我粘贴在下面的第一个块。我有相同类型的四个具有不同状态的块。我正在使用过滤器概念来显示列表。但是当我用第二个或第三个块排序时，它正在对第一个块进行排序。

<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

这是因为您使用相同的模型对所有块进行排序：

您可以使用不同的模型来保留块中的顺序：

<!-- 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>我发现在您的代码中丢失的结束标签。