javascript - AngularJS 仅对 ng-repeat 表中的前两项进行排序

Question

所以我尝试使用 Angular 制作一个简单的可排序表。在阅读了 ng-book 和各种文章后，我已经接近了，但我仍然遇到同样的问题。

我有一个 7 列 100 行的表。每当我单击要排序的列的标题时，它只会对前两个条目进行排序，而不是对所有 100 个条目进行排序。此外，我只能对其进行一次排序(即，除非我刷新页面，否则它不会返回到其原始顺序)出于某种原因)

不太确定我做错了什么。非常感谢任何帮助!

这是我的代码:

查看 HTML:

<div ng-controller="currentTradeshowsController">


    <table class="table table-hover tabled-bordered">
        <tr>
            <th>
                <a ng-click="changeSorting('eventName')">Tradeshow</a>
            </th>
            <th>
                <a>Division Lead</a>
            </th>
            <th>
                <a>Division(s) Participating</a>
            </th>
            <th>
                <a>Location</a>
            </th>
            <th>
                <a>Details</a>
            </th>
            <th>
                <a>Start</a>
            </th>
            <th>
                <a>End</a>
            </th>
        </tr>
        <tr ng-repeat="items in events | orderBy:sort.column:sort.descending"> 
            <td><a href="#/tradeshowdetails/{{$index}}">{{items.Event.eventName}}</a></td> 
            <td>{{items.Event.tradeshow.divisionLead.firstName}} {{items.Event.tradeshow.divisionLead.lastName}}</td>
            <td>{{items.Event.divisionParticipating}}</td>
            <td>{{items.Event.location.address2}}</td>
            <td>{{items.Event.tradeshow.highleveShowDetails}}</td>
            <td>{{items.Event.startDate}}</td>
            <td>{{items.Event.endDate}}</td>
        </tr>
    </table>


</div>

Controller JavaScript:

app.controller('currentTradeshowsController', function($scope, eventsService){

      eventsService.getData().then(function(returnMessage){
        $scope.events = returnMessage.data;

      });

      $scope.sort = {
                column: '',
                descending: false
            };    
            $scope.changeSorting = function(column) {

                var sort = $scope.sort;

                if (sort.column == column) {
                    sort.descending = !sort.descending;
                } else {
                    sort.column = column;
                    sort.descending = false;
                }
            };
    });

Answer 1

您的ng-click可以简化为

<td ng-click="sort.descending=!sort.descending;sort.column='items.Event.eventName'">Event Name</td>

这样，除了 Controller 中的 JSON 数组之外，您不需要任何其他内容，并且不需要更改排序列的函数。这是一个简化的 fiddle :http://jsfiddle.net/ANEA6/2/

编辑:摆弄更长的数组。所有行均已排序:http://jsfiddle.net/ANEA6/4/

编辑:修改你的数据。我只对第一列进行了排序:http://jsfiddle.net/ANEA6/7/