Ordering by does not effectively filter out numbers

Question

Ordering by does not effectively filter out numbers

I am using the ng-repeat directive in my code.

<tr data-ng-repeat="list in vm.customer.lists | orderBy: list.id track by $index">
    <td>[[list.name]]</td>
    <td>[[list.locations.length]] Location<span data-ng-cloak data-ng-if="list.locations.length !== 1">s</span></td>
    <td><a data-ng-href="/#/locations/manage/list/edit/[[vm.customer.id]]/[[list.id]]" class="button expand">Manage Locations</a></td>
</tr>

I have a total of 3 lists in vm.customer.lists

I am attempting to sort these lists from least to greatest based on their list.id (1, 2, 3, etc.)

Could it be that I am not able to use the orderBy function with list?

javascript angularjs

Answer 1

Answer №1

It must be as follows:

<tr data-ng-repeat="list in vm.customer.lists | orderBy: 'id' ">

DEMO

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.customer = 
      [{
      id: 4,
      name: 'sachin'
      
    }, {
      id: 1,
      name: 'Saurav'
     
    }, {
      id: 3,
      name: 'Dravid'
     
    }, {
      id: 2,
      name: 'Dhoni'
    
    }];
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">  
    <li ng-repeat="list in customer | orderBy: 'id' track by $index">
     {{list.name}}
    </li>
 
</div>

Answer 2

It must be as follows:

<tr data-ng-repeat="list in vm.customer.lists | orderBy: 'id' ">

DEMO

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.customer = 
      [{
      id: 4,
      name: 'sachin'
      
    }, {
      id: 1,
      name: 'Saurav'
     
    }, {
      id: 3,
      name: 'Dravid'
     
    }, {
      id: 2,
      name: 'Dhoni'
    
    }];
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">  
    <li ng-repeat="list in customer | orderBy: 'id' track by $index">
     {{list.name}}
    </li>
 
</div>

Answer 3

Answer №2

Don't forget to add quotes in the filter

<tr data-ng-repeat="list in customer.lists | orderBy: 'id' track by $index">

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.customer = {
    'lists': [{
      id: 4,
      name: 'T',
      locations: []
    }, {
      id: 1,
      name: 'S',
      locations: []
    }, {
      id: 3,
      name: 'R',
      locations: []
    }, {
      id: 2,
      name: 'O',
      locations: []
    }]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr data-ng-repeat="list in customer.lists | orderBy: 'id' track by $index">
      <td>{{list.name}}</td>
      <td>{{list.locations.length}} Location<span data-ng-cloak data-ng-if="list.locations.length !== 1">s</span>
      </td>
      <td><a data-ng-href="/#/locations/manage/list/edit/[[vm.customer.id]]/[[list.id]]" class="button expand">Manage Locations</a>
      </td>
    </tr>
  </table>
</div>

Answer 4

Don't forget to add quotes in the filter

<tr data-ng-repeat="list in customer.lists | orderBy: 'id' track by $index">

var app = angular.module("app", []);
app.controller("ctrl", function($scope) {
  $scope.customer = {
    'lists': [{
      id: 4,
      name: 'T',
      locations: []
    }, {
      id: 1,
      name: 'S',
      locations: []
    }, {
      id: 3,
      name: 'R',
      locations: []
    }, {
      id: 2,
      name: 'O',
      locations: []
    }]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <table>
    <tr data-ng-repeat="list in customer.lists | orderBy: 'id' track by $index">
      <td>{{list.name}}</td>
      <td>{{list.locations.length}} Location<span data-ng-cloak data-ng-if="list.locations.length !== 1">s</span>
      </td>
      <td><a data-ng-href="/#/locations/manage/list/edit/[[vm.customer.id]]/[[list.id]]" class="button expand">Manage Locations</a>
      </td>
    </tr>
  </table>
</div>

Ordering by does not effectively filter out numbers

Answer №1

Answer №2

Similar questions

Retrieve the individual content from a CKEditor instance using Ajax, even when there are multiple CKEditor instances with identical class names

The HTML5 ondrop event finishes executing before zip.js completes its operations

Executing an HTTP request with JavaScript to interact with Salesforce

Creating unit tests for linked functions in Node.js using Jest

Overlap of columns within a nested flexbox arrangement

Error encountered: EPERM when attempting to rename a directory in Node.js unexpectedly

My React app experienced a severe crash when trying to render an animation in L

Having difficulty sending emails with Nodemailer

Transform Json data into CSV file format with customized headers and formatting

What is the process for retrieving a variable within the link section of your Angular Js directive?

A guide on transmitting JSON information from ASP.NET MVC 5 to Angular on the client side, specifically in the context of authentication

Display the worth in a pop-up box

What is the best way to execute AJAX requests in a loop synchronously while ensuring that each request is completed

Incorporating mousewheel functionality by utilizing DOMmouseScroll and mousewheel to trigger functions

Is it possible to define a variable within a JavaScript function and then access it outside of the function?

Welcome to the awe-inspiring universe of Typescript, where the harmonious combination of

I am currently facing a challenge in React Highcharts where I am unable to remove and redraw the graph easily

Transform an image into Base64 format by effortlessly dragging and dropping

Jquery and CSS3 come together in the immersive 3D exhibit chamber

Tracking triggered JavaScript events (across all browsers)