Tips for organizing a list in Angular 1 when a button is clicked

Question

Tips for organizing a list in Angular 1 when a button is clicked

I'm looking for help with sorting a list in Angular 1 when a button is clicked. I want the ability to toggle between ascending and descending order on each click. Here is a link to the code: https://plnkr.co/edit/HYuk7DAgOY6baWhrvXko?p=preview

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

    app.controller('MainCtrl', function($scope) {
      vm =this;
      $scope.name = 'World';
       $scope.sortDir = "ASC"
     $scope.customerData= [
      {
        "name":"naveen",
        "Location":"Delhi",
        "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc5caddcecec585c5d8c2df9392ebccc6cac2c785c8c4c6">[email protected]</a>"
      },
      {
        "name":"sss",
        "Location":"Delhi",
        "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="365857405353581858455f420e0f76515b575f5a1855595b">[email protected]</a>"
      },
      {
        "name":"aa",
        "Location":"Delhi",
        "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcb2bdaab9b9b2f2b2afb5a8e4e59cbbb1bdb5b0f2bfb3b1">[email protected]</a>"
      },
      {
        "name":"zzz",
        "Location":"Delhi",
        "email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e987889f8c8c87c7879a809dd1d0a98e84888085c78a8684">[email protected]</a>"
      }
    ]

    $scope.sortButtonClick =function(){
         $scope.sortDir = "DESC"

    }
    });

javascript angularjs

Answer 1

Answer №1

To sort the data, you can use a filter called orderBy:

  $scope.sortButtonClick = function() {
    if($scope.sortDir === "ASC"){
    $scope.sortDir = "DESC"
    $scope.customerData = $filter('orderBy')($scope.customerData, '-name');
    }else{
    $scope.sortDir = "ASC"
    $scope.customerData = $filter('orderBy')($scope.customerData, 'name');

    }
  }

DEMO

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
  vm = this;
  $scope.name = 'World';
  $scope.sortDir = "ASC"
  $scope.customerData = [{
    "name": "naveen",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e707f687b7b7030706d776a26275e79737f7772307d7173">[email protected]</a>"
  }, {
    "name": "sss",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3cdc2d5c6c6cd8dcdd0cad79b9ae3c4cec2cacf8dc0ccce">[email protected]</a>"
  }, {
    "name": "aa",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94faf5e2f1f1fabafae7fde0acadd4f3f9f5fdf8baf7fbf9">[email protected]</a>"
  }, {
    "name": "zzz",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b7b8afbcbcb7f7b7aab0ade1e099beb4b8b0b5f7bab6b4">[email protected]</a>"
  }]
  $scope.sortButtonClick = function() {
    if($scope.sortDir === "ASC"){
    $scope.sortDir = "DESC"
    $scope.customerData = $filter('orderBy')($scope.customerData, '-name');
    }else{
    $scope.sortDir = "ASC"
    $scope.customerData = $filter('orderBy')($scope.customerData, 'name');

    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f3fcf5e7fef3e0bcf8e1d2a3bca6bcea">[email protected]</a>" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
        <button ng-click="sortButtonClick()">{{sortDir}}</button>
     <ul style="margin: 40px;">
        <li ng-repeat="item in customerData ">
            <span>{{item.name}}</span>
            <button ng-click="deleteItem(item)">X</button>
        </li>
    </ul>
  </body>
</html>

Answer 2

To sort the data, you can use a filter called orderBy:

  $scope.sortButtonClick = function() {
    if($scope.sortDir === "ASC"){
    $scope.sortDir = "DESC"
    $scope.customerData = $filter('orderBy')($scope.customerData, '-name');
    }else{
    $scope.sortDir = "ASC"
    $scope.customerData = $filter('orderBy')($scope.customerData, 'name');

    }
  }

DEMO

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $filter) {
  vm = this;
  $scope.name = 'World';
  $scope.sortDir = "ASC"
  $scope.customerData = [{
    "name": "naveen",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1e707f687b7b7030706d776a26275e79737f7772307d7173">[email protected]</a>"
  }, {
    "name": "sss",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a3cdc2d5c6c6cd8dcdd0cad79b9ae3c4cec2cacf8dc0ccce">[email protected]</a>"
  }, {
    "name": "aa",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94faf5e2f1f1fabafae7fde0acadd4f3f9f5fdf8baf7fbf9">[email protected]</a>"
  }, {
    "name": "zzz",
    "Location": "Delhi",
    "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9b7b8afbcbcb7f7b7aab0ade1e099beb4b8b0b5f7bab6b4">[email protected]</a>"
  }]
  $scope.sortButtonClick = function() {
    if($scope.sortDir === "ASC"){
    $scope.sortDir = "DESC"
    $scope.customerData = $filter('orderBy')($scope.customerData, '-name');
    }else{
    $scope.sortDir = "ASC"
    $scope.customerData = $filter('orderBy')($scope.customerData, 'name');

    }
  }
});

<!DOCTYPE html>
<html ng-app="plunker">
  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f3fcf5e7fef3e0bcf8e1d2a3bca6bcea">[email protected]</a>" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>
  <body ng-controller="MainCtrl">
        <button ng-click="sortButtonClick()">{{sortDir}}</button>
     <ul style="margin: 40px;">
        <li ng-repeat="item in customerData ">
            <span>{{item.name}}</span>
            <button ng-click="deleteItem(item)">X</button>
        </li>
    </ul>
  </body>
</html>

Answer 3

Answer №2

HTML

 <ul ng-repeat="obj in data | orderBy:property:reverse">
            <li>{{obj.name}}</li>
            <button ng-click="removeItem(obj)">X</button>
        </ul>

Controller

$scope.property = 'name';

$scope.reverse = true;

$scope.toggleSortOrder =function(){
    $scope.reverse = !$scope.reverse 
}

Demo

Answer 4

HTML

 <ul ng-repeat="obj in data | orderBy:property:reverse">
            <li>{{obj.name}}</li>
            <button ng-click="removeItem(obj)">X</button>
        </ul>

Controller

$scope.property = 'name';

$scope.reverse = true;

$scope.toggleSortOrder =function(){
    $scope.reverse = !$scope.reverse 
}

Demo

Tips for organizing a list in Angular 1 when a button is clicked

Answer №1

Answer №2

Similar questions

Unsupported file format for Three.js FBX Binary model

Merge $FirebaseObject with multiple location updates

Using V-model in conjunction with the boostrap-vue b-table component

Is there a way for me to retrieve the information within this function? It seems like it may be a promise, but I am uncertain

Creating a Custom Select Option Component with Ant Design Library

Uploading profile images with AngularJS and Firebase

Adjusting the content of a single text box by typing in another

Tips for breaking apart elements of a JavaScript array when a specific delimiter is present in an object property

Transforming items into an array

Issue with webcomponents-lite.js file

Issues with integrating React-Bootstrap onto components

Exploring the world of XD plugins, utilizing npm packages and Node.js APIs

React's `setState` function seems to be failing to hold onto

"Utilizing the power of Node.js to perform SQL queries with

Executing a long job in PHP (Laravel) while simultaneously making an AJAX call

Guide on incorporating an HTML element within a binding in Nuxt or Vue

What is the best way to send JSON data to a code behind method instead of a Webmethod?

Can you explain how to convert a 32-bit floating point number from a Buffer to a JSON string in NodeJS while maintaining the original precision?

Employing an array for transmitting parameters to a function

Guide to extracting the value of an attribute from a Meteor collection object