1

So I'm trying to make a simple sortable table using Angular. After reading the ng-book and various articles I've gotten close but I keep having the same issue.

I have a table with 7 columns and 100 rows. Whenever I click the header of a column I want to sort, it only sorts the first two entries instead of all 100. Also I'm only able to sort it once (i.e. it wont return to its original order unless I refresh the page for some reason)

Not quite sure what I'm doing wrong. Any help is really appreciated!

Here's what my code looks like:

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;
                }
            };
    });
3
  • eventName is not a property of your items. Shouldn't items in the ng-repeat be named event and display {{event.eventName}} in the first column?
    – sebnukem
    Mar 13, 2014 at 23:17
  • Just tried it again in a seemingly more simple way, but still having the same issue. This time I did this with the <TR> tag <tr ng-repeat="items in events | orderBy : wonk : reverse=!reverse"> then the sort button looks like: <a ng-click="wonk = 'eventName' ">Tradeshow</a> I'm having the same exact issue, it makes me wonder if its not the sorting but the order the array is being rendered perhaps? Mar 13, 2014 at 23:28
  • I tried this yet another time. Still having the same issue but I'm starting to figure out the problem. for <a ng-click="predicate='name' ">Tradeshow</a> it doesn't matter what I set the predicate to. I could set the predicate to 'blahblahblah' and it still only sorts the first two rows. If I want to sort by the eventName property, what should I set as the predicate? Mar 14, 2014 at 0:13

2 Answers 2

1

your ng-click can be simplied to

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

This way you don't need anything but your JSON array in the controller, and you don't need a function to change the sort column. Here's a simplified fiddle: http://jsfiddle.net/ANEA6/2/

edit: fiddle with a longer array. all rows get sorted: http://jsfiddle.net/ANEA6/4/

edit: fiddle with your data. I've only put a sort on the first column: http://jsfiddle.net/ANEA6/7/

6
  • I tried whats in your fiddle, but I'm still having the same two row issue. Mar 14, 2014 at 0:10
  • 1
    my fiddle is deceptive in the sense that sorting name alphabetically puts "bob" always in the middle, and sorting id always puts "2" in the middle. Can you share the actual JSON you're using, maybe expand my fiddle with your code? Mine works but I can't test it on your stuff.
    – Jorg
    Mar 14, 2014 at 0:13
  • Here's a link to the JSON endpoint I'm using as random data. json-generator.com/j/bVWJaYaWoO?indent=4 Mar 14, 2014 at 1:46
  • Yup that was it. needed to set predicate to Event.eventName Thanks! Mar 14, 2014 at 19:10
  • That's great :) Would you mind marking the answer as correct? That way other people might benefit too
    – Jorg
    Mar 14, 2014 at 22:47
0

Shouldn't this be:

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

?

1
  • What did you do differently here, it looks identical to my markup no? Mar 13, 2014 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.