AngularJs ng-repeat orderBy 切换答案

【问题标题】：AngularJs ng-repeat orderBy toggleAngularJs ng-repeat orderBy 切换
【发布时间】：2016-05-31 22:27:45
【问题描述】：

如何更改ng-repeat 中的orderBy 过滤器？默认订单值是按日期（最近的在前），但是通过单击toggle_to_sort()，我需要将排序顺序更改为按名称（字母顺序），然后如果用户再次单击 - 返回按日期排序。

angular.module('app', []).controller('ctrl', function($scope) {
  $scope.array = [
    {name: 'item1', date: 1453284120},
    {name: 'item2', date: 1453284440},
    {name: 'item3', date: 1453284550},
    {name: 'item4', date: 1453284086},
    {name: 'item5', date: 1453284330},
  ];
    
  $scope.toggle_to_sort = function() {
    // ??
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>

<div ng-app="app" ng-controller="ctrl">

  <div ng-repeat="item in array  | orderBy:'-date'">
    <div>{{item.name}}</div>
  </div>

  <div ng-click="toggle_to_sort()">Toggle<div>

</div>

【问题讨论】：

标签： angularjs angularjs-ng-repeat angularjs-orderby

【解决方案1】：

angular.module("myApp",[]).controller("myController",function($scope){
  

  
$scope.array = [
{name: 'item1', date: 1453284120},
{name: 'item2', date: 1453284440},
{name: 'item3', date: 1453284550},
{name: 'item4', date: 1453284086},
{name: 'item5', date: 1453284330},
]
});

<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    </head>
<body ng-controller="myController">
  <div ng-click="mytoggle=!mytoggle">Name<div><hr>
<div ng-repeat="item in array | orderBy: !mytoggle?'-date':'name' ">
  
	<div>{{item.name}}</div>
</div>
</body>

  </html>

希望对您有所帮助...

【讨论】：

【解决方案2】：

声明一个标志

$scope.changeFilter=false;

然后添加这个

<div ng-repeat="item in array  | orderBy: !changeFilter ? '-date' : 'name'">

更改按钮单击时的值

<div ng-click="changeFilter=!changeFilter"><div>

DEMO

【讨论】：

【解决方案3】：

在你的 JS 中我会添加这个：

$scope.toggled = false;

然后在你的 HTML 中这样做：

<div ng-repeat="item in array  | orderBy:'-date'" ng-hide="toggled">
    <div>{{item.name}}</div>
</div>

<div ng-repeat="item in array  | orderBy:'-name'" ng-show="toggled">
    <div>{{item.name}}</div>
</div>

<div ng-click="toggled=!toggled"><div>

【讨论】：