AngularJs ng-repeat orderBy toggle

Как изменить фильтр orderBy в ng-repeat? Значение по умолчанию по умолчанию - по дате (самое последнее первое), но нажав на toggle_to_sort(), мне нужно изменить порядок сортировки по имени (порядок алфавита), а затем, если пользователь снова нажмет - вернитесь к порядку по дате.AngularJs ng-repeat orderBy toggle

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>

источник

2016-02-19 johanson

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' "> 
 
    
 
\t <div>{{item.name}}</div> 
 
</div> 
 
</body> 
 

 
    </html>

Надеюсь, что это поможет ...

источник

2016-02-19 11:26:17

Объявите флаг

$scope.changeFilter=false;

затем добавить этот

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

изменения значения на кнопку мыши

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

DEMO

источник

2016-02-19 11:08:37

В ваших 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>

источник

2016-02-19 11:10:03 davarisg

ответ

Смежные вопросы