1

I am trying to sort same structure table but different data with Angular. The Plunker example can see here

The problem is how can I sort for only a specific table not for all the table. I think I can achieve the result by make new variables to store different values for different tables but there is any alternative and efficient way to do it.

Sample data:

$scope.friends =
    [{name:'John', phone:'555-1212', age:10},
     {name:'Mary', phone:'555-9876', age:19},
     {name:'Mike', phone:'555-4321', age:21},
     {name:'Adam', phone:'555-5678', age:35},
     {name:'Julie', phone:'555-8765', age:29}];

$scope.close_friends =
    [{name:'Alan', phone:'555-1212', age:21},
     {name:'Jen', phone:'555-9876', age:29},
     {name:'David', phone:'555-4321', age:24},
     {name:'Raya', phone:'555-5678', age:25},
     {name:'Brok', phone:'555-8765', age:28}];

$scope.very_close_friends =
    [{name:'Peter', phone:'555-1212', age:41},
     {name:'Beck', phone:'555-9876', age:39}];
Improve this question
3
  • use a $filter to pick the correct sort for the data. Commented Apr 26, 2016 at 14:13
  • could you create a plunker for your answer? Commented Apr 26, 2016 at 14:15
  • just $filter the right array i don't see the problem here ? Commented Apr 26, 2016 at 14:27

2 Answers 2

Reset to default
1

Without the use of the order function:

<table class="friend">
    <tr>
     <th>
         <button ng-click="reverse1=!reverse1; predicate = 'name'">Name</button>
         <span class="sortorder" ng-if="predicate === 'name'" ng-class="{reverse:reverse1}"></span>
     </th>
     <th>
         <button ng-click="reverse1=!reverse1; predicate = 'phone'">Phone Number</button>
         <span class="sortorder" ng-if="predicate === 'phone'" ng-class="{reverse:reverse1}"></span>
     </th>
     <th>
         <button ng-click="reverse1=!reverse1; predicate = 'age'">Age</button>
         <span class="sortorder" ng-if=" predicate === 'age'" ng-class="{reverse:reverse1}"></span>
     </th>
    </tr>
    <tr ng-repeat="friend in friends | orderBy:predicate:reverse1">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
      <td>{{friend.age}}</td>
    </tr>
  </table>

plunker: https://plnkr.co/edit/zxPOX41fkcKWsA3xRSW7?p=preview

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This is simple and achieve what I need to do. Many thanks!
Another questions, in the long maintain, can we make a function and handle everything inside that function?
yes, but is not strictly necessary, just remember to use separate variable for the sorting order or separated sort functions, is up to you.
I met a problem with the predicate, like if the predicate has blank space like this my name, the sort didn't work, it threw some error, do we have any workaround for this?
because is not a possible predicate for orderby
0

Add an orderBy property to each array and order by that property in the ng-repeat.

 <tr ng-repeat="friend in friends | orderBy:friends.orderBy">

If you're going to really have all kinds of similar lists like this I'd recommend investigating creating a directive or component for it. It will be much more efficient.

Improve this answer

1 Comment

It is actually a little different, not all the same, but thank for your answer!

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.