Question

我在一个角度页面上有两个表，两个表都有可点击的标题用于排序。不知何故，单击任一表中的标题对BOTH表进行排序，即使它们具有不同的列名和不同的“orderByField”变量。

第一张表：

<table class="table table-striped table-bordered table-hover" style="width: 100%;">
    <thead>
        <tr>
            <th class="clickable colored_text span7 textLeft" ng-click="flagOrderByField='FlagName'; reverseSort = !reverseSort">Flag Name</th>
            <th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='DateAdded'; reverseSort = !reverseSort">Date Added</th>
            <th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='Expires'; reverseSort = !reverseSort">Expires</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="flag in FlagList | orderBy:flagOrderByField:reverseSort" style="border-top: 1px dashed rgb(200, 200, 200);">
            <td ng-class="flag.SystemFlag ? 'text-error' : 'text-success'">{{::flag.FlagName}}</td>
            <td>{{::flag.DateAdded | date:'MM/dd/yyyy' }}</td>
            <td>{{::flag.Expires | date:'MM/dd/yyyy' }}</td>
        </tr>
    </tbody>
</table>

第二张表：

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th class="clickable colored_text" ng-click="orderByField='CourseNumber'; reverseSort = !reverseSort">Course #</th>
            <th class="clickable colored_text" ng-click="orderByField='ClassName'; reverseSort = !reverseSort">Course Name</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="class in classes | orderBy:orderByField:reverseSort | startAt:(currentPage-1)*pageSize | limitTo:pageSize">
            <td>{{::class.CourseNumber }}</td>
            <td>{{::class.ClassName }}</td>
        </tr>
    </tbody>
</table>

如何让这两个表单独排序？（此页面还有一堆其他表，在选项卡上加载Tab键单击，所有这些表都有同样的奇怪行为。）

Answer 1

啊哈 - 在一点点快速直觉中，我注意到两张牌都使用了相同的反向排序＆＃39;变量。我将第一个表更改为＆＃39; flagReverseSort＆＃39;，并将controllers.js中的默认值设置为false;瞧！它应该工作。因此，不仅表格需要自己的orderBy变量，而且它们需要自己独特的reverseSort变量。

AngularJS只需点击一下就可以对两个表进行排序

1 个答案: