Angularjs: $filter in controller

Question

Having issues with getting this filter to work.

$scope.imgCollection.then(function (images) {
    $scope.images = images.thisGal_images;

    if ($scope.images[0].order == '0') {
        console.log('orgName');
        $scope.images = $filter('orderBy')($scope.images, 'orgName');
    } else {
        console.log('sort order');
        $scope.images = $filter('orderBy')($scope.images, 'sortOrder');
        console.log($scope.images);
    }
});

$scope.images returns a list of images from the database. On the initial upload, the sortOrder column is populated with '0' as they can be sorted via ui:sortable. So on the initial view I base the sort order on the file name. After the initial view the DB is written and the first image is given the sortOrder of 1 and increments from there.

This could be my misunderstanding of $filter, but $scope.images = $filter('orderBy')($scope.images,'sortOrder'); is not ordering my $scope.images based on sortOrder.

Thanks

How is it ordering your images? What exactly is happening and what do you want to happen? Can you give a small example? — Nick Larsen
– Nick Larsen, Commented Aug 30, 2013 at 20:44

zs2020 · Accepted Answer · 2013-08-30 20:52:20Z

41

I created a demo for you and hopefully you can compare the code and figure out the issue.

I guess you might forget to inject $filter module. Please take a look a the demo.

<div ng-app="myApp" ng-controller="ctrl">
    <div ng-repeat="image in images">{{image}}</div>
    <button ng-click="order('0')">By orgName</button>
    <button ng-click="order('1')">By sortOrder</button>
</div>

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

function ctrl($scope, $filter) {
    $scope.images = [{
        orgName: 'B',
        sortOrder: 111
    }, {
        orgName: 'A',
        sortOrder: 12
    }, {
        orgName: 'D',
        sortOrder: 13
    }, {
        orgName: 'C',
        sortOrder: 14
    }];

    $scope.order = function (order) {
        if (order == '0') {
            $scope.images = $filter('orderBy')($scope.images, 'orgName');
        } else {
            $scope.images = $filter('orderBy')($scope.images, 'sortOrder');
        }
    }
}

Working Demo

answered Aug 30, 2013 at 20:52

zs2020

54.7k30 gold badges157 silver badges223 bronze badges

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

6 Comments

SuperNinja Over a year ago

taking a closer look, it appears that when I sort by sortOrder, which is set to INT in DB. The images are ordered: 1,10,11,12,2,3,4,5,6 etc. So probably getting converted to json string in my PHP

zs2020 Over a year ago

@Bungdaddy Yep, then you need to convert it to int.

SuperNinja Over a year ago

thanks, that was the key. Example helped me figure that one out

Tamas Over a year ago

thanks for the JSFiddle, I was curious how does the orderBy filter work on a boolean column, so I extended it: jsfiddle.net/M8nDQ/149

mhd Over a year ago

How can i add ascending/descending order ?

|

Collectives™ on Stack Overflow

Angularjs: $filter in controller

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related