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>

这样，除了控制器中的JSON数组之外，您不需要任何其他内容，也不需要更改排序列的函数。这是一个简化的小提琴：http://jsfiddle.net/ANEA6/2/

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

编辑：摆弄您的数据。我只对第一列进行了排序：http://jsfiddle.net/ANEA6/7/

Answer 2

不应该是：

<tr ng-repeat="event in events | orderBy:sort.column:sort.descending"> 
  <td><a href="#/tradeshowdetails/{{$index}}">{{event.eventName}}</a></td> 
  <td>{{event.tradeshow.divisionLead.firstName}} {{event.tradeshow.divisionLead.lastName}}</td>
  <td>{{event.divisionParticipating}}</td>
  <td>{{event.location.address2}}</td>
  <td>{{event.tradeshow.highleveShowDetails}}</td>
  <td>{{event.startDate}}</td>
  <td>{{event.endDate}}</td>
</tr>

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

2 个答案: