AngularJs ng-repeat orderBy toggle

时间:2016-02-19 11:05:28

标签: angularjs angularjs-ng-repeat angularjs-orderby

如何更改private var _foo:Int = 0 var foo:Int { get { return _foo } set { guard newValue <= 999 else { _foo = 999 return } _foo = newValue } } 中的orderBy过滤器?默认订单值是按日期(最近的第一个),但是通过点击ng-repeat,我需要按名称(字母顺序)更改排序顺序,然后如果用户再次点击 - 按日期返回订单

&#13;
&#13;
toggle_to_sort()
&#13;
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() {
    // ??
  }
});
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:2)

宣布一个标志

$scope.changeFilter=false;

然后添加此

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

更改按钮上的值

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

DEMO

答案 1 :(得分:2)

在你的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>

答案 2 :(得分:2)

&#13;
&#13;
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},
]
});
&#13;
<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>
&#13;
&#13;
&#13;

希望它能帮助......