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

AngularJS only Sorting First Two Items from ng-repeat Table

本文关键字：两项 排序 ng-repeat 只对 AngularJS      更新时间：2023-09-26

所以我试着用Angular做一个简单的排序表。在阅读了ng-book和各种文章之后，我已经接近了，但我一直有同样的问题。

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

我不太确定我做错了什么。任何帮助都是非常感激的!

下面是我的代码:

VIEW 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;
                }
            };
    });

您的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/

应该是:

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

?

相关文章：