如何在单击按钮时按角度1排序列表？

Question

could you please tell me how to sort list in angular 1 on button click ? 您能告诉我如何在单击按钮时按角度1对列表进行排序吗？ On button click I want to toggle (ascending and descending )sort list. 在按钮上单击我要切换（升序和降序）排序列表。 https://plnkr.co/edit/HYuk7DAgOY6baWhrvXko?p=preview 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":"naveen.nsit89@gmail.com"
      },
      {
        "name":"sss",
        "Location":"Delhi",
        "email":"naveen.nsit89@gmail.com"
      },
      {
        "name":"aa",
        "Location":"Delhi",
        "email":"naveen.nsit89@gmail.com"
      },
      {
        "name":"zzz",
        "Location":"Delhi",
        "email":"naveen.nsit89@gmail.com"
      }
    ]

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

    }
    });

Answer 1

You can do this using a filter orderBy , 您可以使用过滤器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": "naveen.nsit89@gmail.com" }, { "name": "sss", "Location": "Delhi", "email": "naveen.nsit89@gmail.com" }, { "name": "aa", "Location": "Delhi", "email": "naveen.nsit89@gmail.com" }, { "name": "zzz", "Location": "Delhi", "email": "naveen.nsit89@gmail.com" }] $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="angular.js@1.4.x" 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

HTML 的HTML

  <li ng-repeat="item in customerData | orderBy:propertyName:reverse">
            <span>{{item.name}}</span>
            <button ng-click="deleteItem(item)">X</button>
        </li>

Controller 控制者

$scope.propertyName = 'name';

$scope.reverse = true;

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

Demo 演示版

如何在单击按钮时按角度1排序列表？

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-08-09 17:56:47

解决方案2
0 2017-08-09 18:00:09

如何在单击按钮时按角度1排序列表？

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-08-09 17:56:47

解决方案2 0 2017-08-09 18:00:09

解决方案1
0 已采纳 2017-08-09 17:56:47

解决方案2
0 2017-08-09 18:00:09