угловой ng-повтор в обратном направлении

Как я могу получить обратный массив в угловой?
я пытаюсь использовать фильтр orderBy, но ему нужен предикат (например, "имя") для сортировки:



<tr ng-repeat="friend in friends | orderBy:'name':true">

      <td>{{friend.name}}</td>

      <td>{{friend.phone}}</td>

      <td>{{friend.age}}</td>

<tr>


есть ли способ отменить исходный массив, без сортировки.
вот так:



<tr ng-repeat="friend in friends | orderBy:'':true">

      <td>{{friend.name}}</td>

      <td>{{friend.phone}}</td>

      <td>{{friend.age}}</td>

<tr>
726   16  

16 ответов:

Я бы предложил использовать пользовательский фильтр, такой как этот:

app.filter('reverse', function() {
  return function(items) {
    return items.slice().reverse();
  };
});

, который затем может быть использован как:

<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>

это здесь: Демонстрация Plunker

этот фильтр можно подгонять для приспособления ваших потребностей как увидено пригонкой. Я привел другие примеры в демонстрации. Некоторые опции включают проверку того, что переменная является массивом перед выполнением обратного, или делает его более мягким, чтобы разрешить разворот большего количества вещей например, струны.

319  
2015-03-13 20:16:59

вот что я использовал:

<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>

обновление:

мой ответ был в порядке для старой версии угловой. Теперь, вы должны использовать

ng-repeat="friend in friends | orderBy:'-'"

или

ng-repeat="friend in friends | orderBy:'+':true"

от https://stackoverflow.com/a/26635708/1782470

191  
2017-05-23 15:02:21

извините за то, что поднял это через год, но есть новый,простое решение, который работает для углового v1.3.0-rc.5 и выше.

об этом говорится в docs: "Если свойство не предоставлено (например,'+'), то сам элемент массива используется для сравнения, где сортировка". Итак, решение будет:

ng-repeat="friend in friends | orderBy:'-'" или

ng-repeat="friend in friends | orderBy:'+':true"

это решение кажется лучше, потому что не изменить массив, и не требует дополнительных вычислительных ресурсов (по крайней мере в наш код). Я прочитал все существующие ответы и все еще предпочитаю этот им.

120  
2016-03-11 15:24:09

вы можете отменить с помощью параметра $index

<tr ng-repeat="friend in friends | orderBy:'$index':true">
51  
2013-09-22 21:01:19

простое решение: - (нет необходимости делать какие-либо методы)

ng-repeat = "friend in friends | orderBy: reverse:true"
38  
2017-10-09 09:51:00

вы можете просто вызвать метод в своей области, чтобы отменить его для вас, например:

<!doctype html>
<html ng-app="myApp">
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.angularjs.org/1.0.5/angular.min.js"></script>
    <script>
    angular.module('myApp', []).controller('Ctrl', function($scope) {
        $scope.items = [1, 2, 3, 4];
        $scope.reverse = function(array) {
            var copy = [].concat(array);
            return copy.reverse();
        }
    });
    </script>
</head>
<body ng-controller="Ctrl">
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
    <ul>
        <li ng-repeat="item in reverse(items)">{{item}}</li>
    </ul>
</body>
</html>

отметим, что $scope.reverse создает копию массива, начиная с Array.prototype.reverse изменяет исходный массив.

17  
2013-03-07 11:10:58

Если вы используете 1.3.x, вы можете использовать следующее

{{ orderBy_expression | orderBy : expression : reverse}}

пример список книг по дате публикации в порядке убывания

<div ng-repeat="book in books|orderBy:'publishedDate':true">

Источник:https://docs.angularjs.org/api/ng/filter/orderBy

13  
2015-05-07 13:37:22

Если вы используете angularjs версия 1.4.4 и выше,простой способ сортировки с помощью " $ index".

 <ul>
  <li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>

посмотреть демо

9  
2016-06-02 16:36:24

при использовании MVC в .NET с Angular вы всегда можете использовать OrderByDecending () при выполнении запроса БД следующим образом:

var reversedList = dbContext.GetAll().OrderByDecending(x => x.Id).ToList();

тогда на угловой стороне он уже будет отменен в некоторых браузерах (IE). При поддержке Chrome и FF, вам нужно будет добавить orderBy:

<tr ng-repeat="item in items | orderBy:'-Id'">

в этом примере вы будете сортировать в порядке убывания по свойству .Id. Если вы используете подкачку, это становится более сложным, потому что только первая страница будет отсортирована. Ты нужно справиться с этим с помощью .файл фильтра js для вашего контроллера или каким-либо другим способом.

1  
2017-02-14 02:42:19

вы также можете использовать .обратный.)( Это собственная функция массива

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>

0  
2015-08-14 15:31:38

Это потому, что вы используете объект JSON. Когда вы сталкиваетесь с такими проблемами, то измените свой объект JSON на объект массива JSON.

Например,

{"India":"IN","America":"US","United Kingdon":"UK"} json object
[{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}]
0  
2016-02-06 11:27:46

The orderBy фильтр выполняет стабильная сортировка по состоянию на угловой 1.4.5. (См. GitHub pull request https://github.com/angular/angular.js/pull/12408.)

так что достаточно использовать постоянный сказуемое и reverse значение true:

<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>
0  
2016-02-14 22:12:28

Я нашел что-то вроде этого, но вместо массива я использую объекты.

вот мое решение для объектов:

добавить пользовательский фильтр:

app.filter('orderObjectBy', function() {
    return function(items, field, reverse){

        var strRef = function (object, reference) {
            function arr_deref(o, ref, i) {
                return !ref ? o : (o[ref.slice(0, i ? -1 : ref.length)]);
            }
            function dot_deref(o, ref) {
                return !ref ? o : ref.split('[').reduce(arr_deref, o);
            }
            return reference.split('.').reduce(dot_deref, object);
        };

        var filtered = [];

        angular.forEach(items, function(item) {
           filtered.push(item);
        });
        filtered.sort(function (a, b) {
           return (strRef(a, field) > strRef(a, field) ? 1 : -1);
        });
        if(reverse) filtered.reverse();
        return filtered;
    };
});

, который затем может быть использован как

<div ng-repeat="(key, value) in items | orderObjectBy:'field.any.deep':true">

Если вам нужна поддержка старого браузера, вам нужно будет определить функцию reduce (это доступно только в ECMA-262 mozilla.org)

// Production steps of ECMA-262, Edition 5, 15.4.4.21
// Reference: http://es5.github.io/#x15.4.4.21
if (!Array.prototype.reduce) {
Array.prototype.reduce = function(callback /*, initialValue*/) {
'use strict';
  if (this == null) {
    throw new TypeError('Array.prototype.reduce called on null or undefined');
  }
  if (typeof callback !== 'function') {
    throw new TypeError(callback + ' is not a function');
  }
  var t = Object(this), len = t.length >>> 0, k = 0, value;
  if (arguments.length == 2) {
    value = arguments[1];
  } else {
    while (k < len && !(k in t)) {
      k++; 
    }
    if (k >= len) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    value = t[k++];
  }
  for (; k < len; k++) {
    if (k in t) {
      value = callback(value, t[k], k, t);
    }
  }
  return value;
};
}
0  
2016-04-26 17:05:54

Я сам разочаровался в этой проблеме, и поэтому я изменил фильтр, созданный @Trevor Senior, когда я столкнулся с проблемой с моей консолью, сказав, что он не может использовать обратный метод. Я также хотел сохранить целостность объекта, потому что это то, что Angular первоначально использует в директиве ng-repeat. В этом случае я использовал ввод stupid (key), потому что консоль расстроится, сказав, что есть дубликаты, и в моем случае мне нужно было отслеживать по индексу$.

фильтр: 

angular.module('main').filter('reverse', function() {
    return function(stupid, items) {
    var itemss = items.files;
    itemss = itemss.reverse();  
    return items.files = itemss; 
  };
});

HTML: <div ng-repeat="items in items track by $index | reverse: items">

0  
2016-08-12 17:49:27

Я добавляю один ответ, который никто не упомянул. Я бы попытался заставить сервер сделать это, если у вас есть один. Фильтрация на стороне клиента может быть опасной, если сервер возвращает много записей. Потому что вы можете быть вынуждены добавить подкачки. Если у вас есть подкачка с сервера, то клиентский фильтр по заказу, будет находиться на текущей странице. Что бы запутать конечного пользователя. Так что если у вас есть сервер, то отправьте orderby с вызовом и пусть сервер вернет его.

0  
2017-01-17 12:23:47

Я бы sugest с помощью массива родной обратный метод всегда лучше Выбор над созданием фильтра или с помощью $index.

<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>

Plnkr_demo.

-2  
2015-09-14 17:12:09

Comments

    Ничего не найдено.
Click here to cancel reply.