ng-repeat orderBy keeping fixed top value

Question

see the fiddle here http://jsfiddle.net/prantikv/gcz4gwgw/1/

i want to get one i item on the top of the list and the rest in alphabetical order:

<div ng-controller="MyCtrl">
 <ul>
  <li ng-repeat="value in name | orderBy:'name'">{{value.name}} </li>   
   </ul>    

  </div>

In my controller i have the following

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name=[
{name:'zani',country:'Norway'},
{name:'aege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]


}

what i want is the name "kai" to come first and then the rest in alphabetical order.

================Edit===============

now i have played and got the following

in my view:

<div ng-controller="MyCtrl">
 <ul>
  <li ng-repeat="value in name | orderBy:myValueFunction ">{{value.name}} </li>   
   </ul>    

  </div>

in my controller :

 $scope.myValueFunction = function(value) {
    if(value.name == "kai"){

        return value.name;
    }else{
        //what todo here so the rest of the list is sorted alphabetically
    }
}

score 7 · Answer 1 · answered Sep 03 '15 at 15:16

7

You can add a "pinned" variable to your array item, and make it like this:

$scope.name=[
{name:'zani',country:'Norway', pinned: false},
{name:'aege',country:'Sweden', pinned: false},
{name:'Kai',country:'Denmark', pinned: true}]

And then change you ng-repeat accordingly:

<li ng-repeat="value in name | orderBy:['pinned','name']">{{value.name}} </li>

Now as "pinned" has the first order priority, 'kai' will always be the first in the loop.

answered Sep 03 '15 at 15:16

Behrooz

1,895
4
31
47

i am getting the data form a database so it will be hard to do so..isn't there any other custom function that i can use? – krv Sep 03 '15 at 15:18
You can create a custom angular filter that handles the sorting. Then you could just use:
{{ whatever}}

Behrooz

Sep 03 '15 at 15:21

1

Since this is javascript you don't even need to include pinned:false on the other objects, a attribute not present counts as false. – Alex Oct 19 '16 at 00:22

score 4 · Accepted Answer · answered Sep 03 '15 at 15:26

4

Above answer is good to implement but as you don't have an option to edit a response then you follow easy workaround like I mentioned below. Else you could go for creating custom filter.

Markup

<div ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="single in name | filter:{'name':'Kai'}">{{single.name}} </li>  
    <li ng-repeat="value in name | filter:{'name':'!Kai'}" | orderBy:'name'">{{value.name}} </li>   
  </ul>    
</div>

answered Sep 03 '15 at 15:26

Pankaj Parkar

134,766
23
234
299

looks good but will it cause the app to lag if the list is big? – krv Sep 03 '15 at 15:29
@krv big in the the sense? what would be the big number exactly? – Pankaj Parkar Sep 03 '15 at 15:30
i edited the code now the item that i want appears on top but the rest of the list is not sorted.. – krv Sep 03 '15 at 15:33

score 3 · Answer 3 · answered Sep 03 '15 at 16:06

for those coming to this question i got it to work: Working fiddle here: http://jsfiddle.net/prantikv/gcz4gwgw/7/

so in my view i have the following:

<div ng-controller="MyCtrl">
 <ul>
  <li ng-repeat="value in name | orderBy:myValueFunction ">{{value.name}} </li>   
   </ul>    

  </div>

in my controller:

function MyCtrl($scope) {
$scope.name=[
    {name:'zani',country:'Norway'},
    {name:'aege',country:'Sweden'},
    {name:'Kai',country:'Denmark'}];

   $scope.myValueFunction = function(value) {

    if(value.name == "Kai"){
            return -1; //skip this sort and place at top
    }else{
        return value.name;//return the default sort
    }
   }  
 }

This works with alphabetical sort as it is the default sort order

ng-repeat orderBy keeping fixed top value

3 Answers3