orderBy multiple fields in Angular when dropdown is selected

Question

How can I use select element to sort an array by mutiple fields?

  <select ng-model="selectedOrder">
    <option value='id'>id</option>
    <option value='-id'>-id</option>
    <option value='country'>country</option>
    <option value='address'>address</option>
    <option value='["country","-id"]'>country, -id</option>
    <option value='["-country","address"]'>-country, address</option>        
  </select>

<ul>
  <li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder">{{ detail }}</li>    
</ul>

If I set order options in a controller everything is fine:
$scope.selectedOrder = ["country", "-id"];

If select option "country, -id" or "-country, address" then sorting not occurs.

Full example here http://plnkr.co/edit/w968MMN3qT9AB4XXRosV?p=preview

Cyril Gandon · Accepted Answer · 2016-02-29 15:33:29Z

Specify your different options in your controller, it will run smoothly this way. I don't think value property of option can contains object of any sort.

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

app.controller('MainCtrl', function($scope) {


  $scope.options = [{
    label: "id",
    value: "id"
  }, {
    label: "-id",
    value: "-id"
  }, {
    label: "country",
    value: "country"
  }, {
    label: "address",
    value: "address"
  }, {
    label: "country, -id",
    value: ["country", "-id"]
  }, {
    label: "-country, address",
    value: ["-country", "address"]
  }];


  // all countries
  $scope.details = [{
    id: 1,
    country: 'Finland',
    address: 'Mainstreet 2'
  }, {
    id: 2,
    country: 'Mexico',
    address: 'Some address 1'
  }, {
    id: 3,
    country: 'Canada',
    address: 'Snowroad 45'
  }, {
    id: 4,
    country: 'Finland',
    address: 'Rainbow 12'
  }, {
    id: 5,
    country: 'Canada',
    address: 'Beverly 15'
  }, {
    id: 6,
    country: 'Mexico',
    address: 'Some address 3'
  }];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link href="style.css" rel="stylesheet" />
  <script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="[email protected]"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div>
    <label>Country filter</label>
    <input type="text" ng-model="countryFilter" />

    <label>Order by</label>
    <select ng-model="selectedOrder" ng-options="option.label for option in options">

    </select>
  </div>
  <ul>
    <li ng-repeat="detail in details | filter:{country: countryFilter} | orderBy:selectedOrder.value">{{ detail }}</li>
  </ul>
</body>

</html>

Collectives™ on Stack Overflow

orderBy multiple fields in Angular when dropdown is selected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related