如何在按钮点击的角度1中对列表进行排序？

请问您可以告诉我如何在角度1按钮点击排序列表？点击按钮时，我想切换（升序和降序）排序列表。 https://plnkr.co/edit/HYuk7DAgOY6baWhrvXko?p=preview 如何在按钮点击的角度1中对列表进行排序？

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":"[email protected]" 
     }, 
     { 
     "name":"sss", 
     "Location":"Delhi", 
     "email":"[email protected]" 
     }, 
     { 
     "name":"aa", 
     "Location":"Delhi", 
     "email":"[email protected]" 
     }, 
     { 
     "name":"zzz", 
     "Location":"Delhi", 
     "email":"[email protected]" 
     } 
    ] 

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

    } 
    });

来源

2017-08-09 naveen

排序依据是什么？名称？电子邮件？位置？给我们一些工作...... –

我看到你已经设置了'vm = this'，但这是我们最后看到'vm'。查看[this]（https://toddmotto.com/digging-into-angulars-controller-as-syntax/）文章，了解有关controller-as语法w/examples的一些详细信息。 – Will

您可以使用过滤器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": "[email protected]" 
 
    }, { 
 
    "name": "sss", 
 
    "Location": "Delhi", 
 
    "email": "[email protected]" 
 
    }, { 
 
    "name": "aa", 
 
    "Location": "Delhi", 
 
    "email": "[email protected]" 
 
    }, { 
 
    "name": "zzz", 
 
    "Location": "Delhi", 
 
    "email": "[email protected]" 
 
    }] 
 
    $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="[email protected]" 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>

来源

2017-08-09 17:56:47 Sajeetharan

HTML

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

控制器

$scope.propertyName = 'name'; 

$scope.reverse = true; 

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

Demo

来源

2017-08-09 18:00:09 Valter

如何在按钮点击的角度1中对列表进行排序？

回答

相关问题