Angular JS orderBy not working using dropdown

Question

i am trying to do orderBy using dropdown value, but its not working :(

CODE:

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.datas = [{
        "id": "1",
            "name": "name area 1"
    }, {
        "id": "2",
            "name": "name area 2"
    }, {
        "id": "3",
            "name": "name area 3"
    }, {
        "id": "4",
            "name": "name area 4"
    }];
    $scope.dropdown = [{
        "title": "Newest first",
            "value": "true"
    }, {
        "title": "Oldest first",
            "value": "reverse"
    }];
});

HTML:

    <div ng-app="myApp">
      <div ng-controller="myCtrl">
          <ul ng-repeat="rows in datas | orderBy: 'id':orderByData">
              <li>{{rows.id}} : {{rows.name}}</li>
          </ul>
          <select ng-model="orderByData" ng-options="x.value as x.title for x in dropdown"></select>
      </div>
    </div>

DEOM JS BIN

krzysiek.ste · Accepted Answer · 2014-07-18 10:07:49Z

2

Why you use reverse? Please use false instead reverse and it should work fine.

$scope.dropdown = [{
        "title": "Newest first",
            "value": "true"
    }, {
        "title": "Oldest first",
            "value": "false"
    }];

edited Jul 18, 2014 at 10:07

answered Jul 18, 2014 at 9:59

krzysiek.ste

2,2761 gold badge28 silver badges24 bronze badges

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

Comments

dfsq · Accepted Answer · 2014-07-18 10:00:26Z

1

You don't need reverse parameter here. Instead you can do something like this:

<ul ng-repeat="rows in datas | orderBy: getSort()">
    <li>{{rows.id}} : {{rows.name}}</li>
</ul>

Where getSort is defined as:

$scope.getSort = function() {
    return $scope.orderByData ? 'id' : '-id';
};

Basically you want sort part to look like orderBy: 'id' or orderBy: '-id'.

Demo: http://jsbin.com/pepureta/1/edit?html,js,output

answered Jul 18, 2014 at 10:00

dfsq

193k26 gold badges244 silver badges261 bronze badges

Collectives™ on Stack Overflow

Angular JS orderBy not working using dropdown

2 Answers 2

Comments

Demo: http://jsbin.com/pepureta/1/edit?html,js,output

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Demo: http://jsbin.com/pepureta/1/edit?html,js,output

Comments

Your Answer

Sign up or log in

Post as a guest

Related