Question

你能告诉我如何在按钮点击的角度1中对列表进行排序吗？在按钮上单击我想切换（升序和降序）排序列表。 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

您可以使用过滤器 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');

    }
  }

<强>样本

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

  <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

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

2 个答案: