sort array in angularjs

Question

Im working on sorting on an array using Angular JS using orderBy. But still its not getting sorted on a particular key.

Here is the code

var app = angular.module('sortModule', [])
app.controller('MainController', function($scope,$filter){    
$scope.languages = [ 
        { name: 'English', image: '/images/english.png',key:2 },
        { name: 'Hindi', image: '/images/hindi.png',key:3 },
    { name: 'English', image: '/images/english.png',key:2},
    { name: 'Telugu', image: '/images/telugu.png',key:1 }];        

var newLanguages = []
newLanguages = angular.copy($scope.languages);  
function sortImages() { 
        $scope.languages = []
    $scope.keys = []        
        for(language in newLanguages) {
            $scope.keys.push(newLanguages[language])
    }
    $filter('orderBy')($scope.keys, 'key')
    console.log(JSON.stringify($scope.keys))
}
sortImages();

});

Fiddle

Im planning to see sorting based on "key". telugu should come first, english next and hindi last.

gaurav5430 · Accepted Answer · 2016-01-14 05:05:26Z

15

you need to have:

$scope.keys = $filter('orderBy')($scope.keys, 'key', false)

the order by filter returns a new array, it does not make changes to the passed array.

updated fiddle: http://jsfiddle.net/kjuemhua/17/

answered Jan 14, 2016 at 5:05

gaurav5430

14.1k8 gold badges73 silver badges127 bronze badges

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

4 Comments

Syed Over a year ago

Yes, you're right. It was a silly mistake. If you have a better code for sorting, can you plz post it?

gaurav5430 Over a year ago

i am not sure why are you using 3 arrays and angular.copy. you could probably sort your original array.

gaurav5430 Over a year ago

also...you don't have a sort function in controller in the fiddle

Syed Over a year ago

Hey I did that click button. Its working. If you have an optimised one. Can you plz check it? Here is the new fiddle jsfiddle.net/SyedNizamChennai/kjuemhua/18

Sheetal · Accepted Answer · 2016-01-14 05:14:25Z

Remove the OrderBy from the html markup to display unordered list:

<div ng-app="sortModule" class="nav">
<div ng-controller="MainController">


    <button ng-click="sort()">Sort  
    </button>
    <div></div>
    <div >        
        <ul>
            <li ng-repeat="lang in languages">
               <span>{{lang.name}}</span>
            </li>
        </ul>
    </div>
    </div>
</div>

Now using the button sort sort the list

var app = angular.module('sortModule', [])
app.controller('MainController', function($scope,$filter){    
    $scope.languages = [ 
            { name: 'English', image: '/images/english.png',key:2 },
            { name: 'Hindi', image: '/images/hindi.png',key:3 },
        { name: 'English', image: '/images/english.png',key:2},
        { name: 'Telugu', image: '/images/telugu.png',key:1 }];        

    var newLanguages = []
    newLanguages = angular.copy($scope.languages);  
    $scope.sort = function(){ 
            $scope.languages = []
        $scope.keys = []        
            for(language in newLanguages) {
                $scope.keys.push(newLanguages[language])
        }
        $scope.keys = $filter('orderBy')($scope.keys, 'key', false);
        $scope.languages = $scope.keys;
        console.log(JSON.stringify($scope.keys))
    }
});

Collectives™ on Stack Overflow

sort array in angularjs

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related