OrderBy predicate

Question

OrderBy predicate

4.7k views Asked by Artur At 14 November 2014 at 10:49

I've got this code:

   var app = angular.module('app', []);
   app.controller('RadioCtrl', ['$scope', '$http',
     function($scope, $http) {
       $http.jsonp('http://www.filltext.com/?callback=JSON_CALLBACK&rows=5&fname={firstName}&lname={lastName}&id={index}').success(function(data) {
         $scope.people = data;
       })
     }
   ]);

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <title>Radio button</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>

<body>
  <section ng-controller="RadioCtrl">
    <input type="text" ng-model="pepek.fname">
    <br>Ascended
    <input type="radio" ng-model="direction" checked>Descended
    <input type="radio" ng-model="direction" value="reverse">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Second name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in people| filter:pepek |orderBy:person.id">
          <td>{{person.id}}</td>
          <td>{{person.fname}}</td>
          <td>{{person.lname}}</td>
        </tr>
      </tbody>
    </table>

  </section>
</body>

</html>

I'd like to click radio button Ascending or Descending and my table would be lined up by ID. Even when i try simple orderBy:id or orderBy:-id or orderBy:person.id or orderBy:id:reverse or orderBy:id:direction non of those cases didn't lined up Ascending by ID it always does Descending and i don't know why. Thank you in advance :)

Original Q&A

There are 2 answers

Manish Kr. Shukla On 14 November 2014 at 10:53

This happens because your ID is perhaps being stored as a String value rather than integer. Try this :

<tr ng-repeat="person in people | orderBy:parseFloat(person.id)">

**Gruff Bunny** · Accepted Answer · 2014-11-14 11:45:12

The ng-repeat expression wasn't quite right. Should be something like:

ng-repeat="person in people| filter:pepek | orderBy:'id':reverse"

and the radio button declarations need to look like this:

<input type="radio" ng-model="reverse" ng-value="false">Descended
<input type="radio" ng-model="reverse" ng-value="true">

var app = angular.module('app', []);
   app.controller('RadioCtrl', ['$scope', '$http',
     function($scope, $http) {
       
       $scope.reverse = false;
       
       $http.jsonp('http://www.filltext.com/?callback=JSON_CALLBACK&rows=5&fname={firstName}&lname={lastName}&id={index}').success(function(data) {
         $scope.people = data;
       })
     }
   ]);

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8">
  <title>Radio button</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
</head>

<body>
  <section ng-controller="RadioCtrl">
    <input type="text" ng-model="pepek.fname">
    <br>Ascended
    <input type="radio" ng-model="reverse" ng-value="false">Descended
    <input type="radio" ng-model="reverse" ng-value="true">
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Second name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in people| filter:pepek |orderBy:'id':reverse">
          <td>{{person.id}}</td>
          <td>{{person.fname}}</td>
          <td>{{person.lname}}</td>
        </tr>
      </tbody>
    </table>

  </section>
</body>

</html>

TechQA.

OrderBy predicate

There are 2 answers

Related Questions in ANGULARJS

Related Questions in ANGULARJS-FILTER

Related Questions in ANGULARJS-ORDERBY

Popular Questions

Popular Tags

Trending Questions