kątowe ng-powtórz w odwrotnej kolejności
Jak mogę uzyskać odwróconą tablicę w kątowej? próbuję użyć filtra orderBy, ale do sortowania potrzebny jest predykat (np.' nazwa'):
<tr ng-repeat="friend in friends | orderBy:'name':true">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
<tr>
Czy istnieje sposób na odwrócenie oryginalnej tablicy bez sortowania. TAK:
<tr ng-repeat="friend in friends | orderBy:'':true">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
<tr>
16 answers
Sugerowałbym użycie niestandardowego filtra takiego jak ten:
app.filter('reverse', function() {
return function(items) {
return items.slice().reverse();
};
});
, które można następnie użyć w następujący sposób:
<div ng-repeat="friend in friends | reverse">{{friend.name}}</div>
Zobacz to działa tutaj: pokaz Plunkera
Ten filtr można dostosować do własnych potrzeb. Podałem inne przykłady w demonstracji. Niektóre opcje obejmują sprawdzenie, czy zmienna jest tablicą przed wykonaniem odwrócenia, lub bardziej pobłażliwe, aby umożliwić odwrócenie większej liczby rzeczy, takich jak ciągi znaków.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-13 18:16:59
Tego użyłem:
<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>
Update:
Moja odpowiedź była OK dla starej wersji Angular. Teraz powinieneś używać
ng-repeat="friend in friends | orderBy:'-'"
Lub
ng-repeat="friend in friends | orderBy:'+':true"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:21
Przepraszam za poruszenie tego po roku, ale jest nowe, łatwiejsze rozwiązanie , Które działa dla Angular v1. 3.0-rc.5 i później .
Jest wymieniony w docs : "Jeżeli nie podano żadnej właściwości (np.'+'), to sam element tablicy jest używany do porównania miejsca sortowania". Więc rozwiązaniem będzie:
ng-repeat="friend in friends | orderBy:'-'" lub
ng-repeat="friend in friends | orderBy:'+':true"
To rozwiązanie wydaje się być lepsze, ponieważ nie modyfikuje tablicy i nie wymaga dodatkowych zasoby obliczeniowe (przynajmniej w naszym kodzie). Przeczytałem wszystkie istniejące odpowiedzi i nadal wolę tę od nich.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-11 13:24:09
Możesz odwrócić przez parametr $index
<tr ng-repeat="friend in friends | orderBy:'$index':true">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-22 18:01:19
Proste rozwiązanie: - (nie trzeba robić żadnych metod)
ng-repeat = "friend in friends | orderBy: reverse:true"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-09 06:51:00
Możesz po prostu wywołać metodę na swoim zakresie, aby odwrócić go za Ciebie, w ten sposób:
<!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>
Zauważ, że $scope.reverse tworzy kopię tablicy, ponieważ Array.prototype.reverse modyfikuje oryginalną tablicę.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-07 09:10:58
Jeśli używasz 1.3.x, możesz użyć następującego
{{ orderBy_expression | orderBy : expression : reverse}}
Przykład Lista książek według daty publikacji w porządku malejącym
<div ng-repeat="book in books|orderBy:'publishedDate':true">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-07 10:37:22
Jeśli używasz angularjs w wersji 1.4.4 i wyższej, łatwym sposobem sortowania jest użycie " $ index ".
<ul>
<li ng-repeat="friend in friends|orderBy:$index:true">{{friend.name}}</li>
</ul>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-02 13:36:24
Podczas korzystania z MVC w. Net z Angular zawsze możesz użyć OrderByDecending () podczas wykonywania zapytania db w następujący sposób:
var reversedList = dbContext.GetAll().OrderByDecending(x => x.Id).ToList();
Wtedy po stronie kątowej będzie już odwrócony w niektórych przeglądarkach (IE). Przy wspieraniu Chrome i FF, trzeba by dodać orderBy:
<tr ng-repeat="item in items | orderBy:'-Id'">
W tym przykładzie można sortować w porządku malejącym na właściwości .Id. Jeśli używasz stronicowania, staje się to bardziej skomplikowane, ponieważ tylko pierwsza strona zostanie posortowana. Musisz się tym zająć. via A.js filter file dla kontrolera, lub w inny sposób.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-14 00:42:19
Możesz również użyć .reverse (). Jest to natywna funkcja tablicy
<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-14 12:31:38
To dlatego, że używasz obiektu JSON. Gdy napotkasz takie problemy, Zmień swój obiekt JSON na obiekt JSON Array.
Na Przykład,
{"India":"IN","America":"US","United Kingdon":"UK"} json object
[{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}]
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-06 09:27:46
Filtr orderBy wykonuje stabilne sortowanie od kątowej 1.4.5. (Zobacz żądanie pull na GitHub https://github.com/angular/angular.js/pull/12408.)
Więc wystarczy użyć stałej predykatu i reverse ustawić na true:
<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-14 20:12:28
Znalazłem coś takiego, ale zamiast tablicy używam obiektów.
Oto moje rozwiązanie dla obiektów:
Dodaj własny filtr:
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;
};
});
, które mogą być następnie używane jak
<div ng-repeat="(key, value) in items | orderObjectBy:'field.any.deep':true">
Jeśli potrzebujesz obsługi starej przeglądarki, musisz zdefiniować funkcję reduce (jest ona dostępna tylko w 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;
};
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-26 14:05:54
Sam byłem sfrustrowany tym problemem, więc zmodyfikowałem filtr stworzony przez @ Trevor Senior, ponieważ miałem problem z moją konsolą, mówiąc, że nie może używać metody odwrotnej. Chciałem również zachować integralność obiektu, ponieważ to właśnie Angular używa pierwotnie w dyrektywie ng-repeat. W tym przypadku użyłem wejścia stupid (key), ponieważ konsola się zdenerwuje mówiąc, że są duplikaty i w moim przypadku musiałem śledzić przez $index.
Filtr:
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">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-12 14:49:27
Dodałem jedną odpowiedź, o której nikt nie wspomniał. Ja bym się postarał aby serwer zrobił to jeśli masz. Filtrowanie Clientside może być niebezpieczne, jeśli serwer zwraca Dużo rekordów. Ponieważ możesz być zmuszony do dodania stronicowania. Jeśli masz stronicowanie z serwera, to filtr klienta na zamówienie, będzie na bieżącej stronie. Co myliłoby użytkownika końcowego. Więc jeśli masz serwer, to Wyślij orderby z wywołaniem i pozwól serwerowi go zwrócić.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-17 10:23:47
Sugerowałbym użycie metody odwrotnej array Native jest zawsze lepszym Wyborem niż tworzenie filtra lub użycie $index.
<div ng-repeat="friend in friends.reverse()">{{friend.name}}</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-14 14:12:09