각도 ng- 반복

227

각도 배열을 반대로 배열하려면 어떻게해야합니까? orderBy 필터를 사용하려고하는데 정렬 할 술어 (예 : 'name')가 필요합니다.

<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>
javascript  arrays  angularjs  reverse  angularjs-ng-repeat 
— 델렘
소스
4
이 새롭고 올바른 방법입니다 stackoverflow.com/a/16261373/988830
— om471987
@QuiteNothing 배열을 식으로 바꾸려면 올바른 방법입니다. 이 경우 문제는 배열이 없는 배열 을 수정 하는 방법이었습니다 .
— JayQuerie.com
<tr ng-repeat = "친구와 친구 | orderBy : '
— -name
간단한 1 줄과 올바른 해결책은 아래 답변을 참조하십시오. 어떤 방법도 만들 필요가 없습니다. 사람들이 왜 이것을 위해 추가 방법을 만들고 있는지 궁금합니다.
— 무하마드 하삼
ng-repeat행동 을 바꾸기 위해 항상 필터를 사용하십시오 ! @Trevor Senior는 좋은 일을했습니다.
— Amir Savand

답변:

329

다음과 같은 사용자 정의 필터를 사용하는 것이 좋습니다.

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

그런 다음 다음과 같이 사용할 수 있습니다.

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

여기에서 작동하는 것을 참조하십시오 : Plunker Demonstration

이 필터는 필요에 맞게 사용자 정의 할 수 있습니다. 데모에서 다른 예제를 제공했습니다. 일부 옵션에는 역전을 수행하기 전에 변수가 배열인지 확인하거나 문자열과 같은 더 많은 것들을 되돌릴 수 있도록보다 관대하게 만드는 것이 포함됩니다.

— JayQuerie.com
소스
21
좋은! items.reverse()배열을 새로 작성하고 반환하는 대신 배열 을 수정 한다는 점에 유의 하십시오.
— Anders Ekdahl
12
감사! 나는 그것을 간과했다. 나는 slice()그 문제를 해결하기 위해 던졌다 .
— JayQuerie.com
9
if (!angular.isArray(items)) return false;배열을 뒤집기 전에 배열이 있는지 확인하기 위해 추가해야 합니다.
— respectTheCode
6
null에 대해보다 방어 적이어야하며 대신 다음을 사용해야합니다. return items? items.slice (). reverse () : [];
— Chris Yeung
5
@Chris Yeung : null 일 때 빈 "[]"을 반환하는 것은 좋지 않습니다. 원래 값을 반환하는 것이 좋습니다.
— Siva
202

이것이 내가 사용한 것입니다 :

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

최신 정보:

이전 버전의 Angular에 대한 대답은 괜찮습니다. 지금, 당신은 사용해야합니다

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

또는

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

에서 https://stackoverflow.com/a/26635708/1782470

— 배틀을 막다
소스
Uing track by, 이것이 나를 위해 일한 유일한 방법
@delboud 당신은 orderBy 후 트랙을 사용해야합니다 :ng-repeat="friend in friends | orderBy:'+': true track by $index"
— Vibhum Bhardwaj
125

죄송 년 후이 최대를 가져 오는, 그러나 새로운, 거기에 쉽게 솔루션 , 나중에 각도 1.3.0-rc.5 및 작동이 .

에서 설명한 문서 "에는 속성이 제공되지 않을 경우, (예를 들어 '+')를 배열 요소 자체 정렬 위치를 비교하는데 사용된다." 따라서 해결책은 다음과 같습니다.

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

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

이 솔루션은 배열을 수정하지 않고 (적어도 우리 코드에서는) 추가 계산 리소스가 필요하지 않기 때문에 더 나은 것 같습니다 . 나는 기존의 모든 답변을 읽었으며 여전히이 답변을 선호합니다.

— 드미트리 곤차
소스
1
팁 고마워! 이것을 읽는 다른 사람들을 향한 머리로 rc4 ( v1.3.0-rc.4) 에서는 작동하지 않는 것처럼 보입니다 . 누구든지 새 릴리스에서 사용해 볼 기회가 있다면 알려주십시오.
— mikermcneil
1
@mikermcneil 댓글 주셔서 감사합니다! 동일한 문서에 따르면 v1.3.0-rc.5( rc.5 docs vs rc.4 docs ) 부터 작동해야합니다 . 답변을 업데이트했습니다
— Dmitry Gonchar
1
나를 위해 작동하지 않습니다 (v1.3.5). 시도 orderBy:'+':true, orderBy:'-':true, orderBy:'-':false, orderBy:'+':false:(
— 코디
2
@Cody 늦게 대답해서 죄송합니다. 여기에 angular v1.3.5 jsfiddle.net/dmitry_gonchar/L98foxhm/1 의 실제 예제가 있습니다. 아마도 문제는 다른 장소에 있었을 것입니다.
— Dmitry Gonchar
1
@alevkon 맞습니다. 그러나 필드를 지정하면 작동합니다 ( '+ id', '-id'fe). 어쩌면 이것은 Angular의 버그 일 것입니다. 필드를 지정하지 않으면 정상적인 순서로 작동하지 않습니까? 나는이 방법을 문서에서 가져 왔습니다 (링크는 대답에 있습니다). 어쨌든 문제는 배열 을 뒤집는 방법이었습니다 .
— Dmitry Gonchar
54

$ index 매개 변수로 되돌릴 수 있습니다

<tr ng-repeat="friend in friends | orderBy:'$index':true">
— jjhrms
소스
13
작동하지만 작동하지 않습니다 (따옴표를 사용하거나 사용하지 않고 시도 $index). 나는 Angular 1.1.5에 있습니다.
— 엔지니어
2
나를 위해 일했습니다 ($ index 대신 정렬을 위해 속성을 사용했습니다) stackoverflow.com/questions/16261348/…
— Certs
4
AngularJS 1.2.13에서는 작동하지 않습니다. 각 객체에 ID를 추가하기 위해 객체 배열을 수정했습니다. ID는 배열 내부의 객체 색인입니다. 그런 다음 ng-repeat="friend in friends | orderBy:'id':true"작동합니다.
— tanguy_k 2013
17

스코프에서 메소드를 호출하여 다음과 같이 역전시킬 수 있습니다.

<!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수정 원의 배열.

— 앤더스 에크 달
소스
11

angularjs 버전 1.4.4 이상을 사용하는 경우 " $ index "를 사용하면 쉽게 정렬 할 수 있습니다.

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

데모보기

— 비슈누
소스
1

Angular와 함께 .NET에서 MVC를 사용할 때 다음과 같이 db 쿼리를 수행 할 때 항상 OrderByDecending ()을 사용할 수 있습니다.

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

그런 다음 각도 측에서는 일부 브라우저 (IE)에서 이미 반전됩니다. Chrome 및 FF를 지원할 때 orderBy를 추가해야합니다.

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

이 예에서는 .Id 속성에서 내림차순으로 정렬합니다. 페이징을 사용하는 경우 첫 페이지 만 정렬되므로 더 복잡해집니다. 컨트롤러의 .js 필터 파일을 통해 또는 다른 방법으로이를 처리해야합니다.

— 화 이즈
소스
0

.reverse ()를 사용할 수도 있습니다. 네이티브 배열 함수입니다

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

— Pian0_M4n
소스
다운 투표는 한 가지만 의미 할 수 있습니다. 더 많은 수신 데이터가 있습니다. {} 또는 []가 데이터를 계속 수신하면 매번 되돌릴 것입니다. 새로운 다이제스트입니다
— Pian0_M4n
이것을 사용하려는 사람에 대한 경고 : reverse배열을 제자리로 되돌리고 역 사본을 반환하지는 않습니다. 이것은 이것이 평가 될 때마다 배열이 반대로된다는 것을 의미합니다.
— jcaron December
0

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

나는 이와 같은 것을 찾았지만 배열 대신 객체를 사용합니다.

다음은 객체에 대한 솔루션입니다.

맞춤 필터 추가 :

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">

이전 브라우저 지원이 필요한 경우 축소 기능을 정의해야합니다 (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

나는이 문제에 대해 스스로 좌절감을 느꼈기 때문에 @Trevor Senior가 만든 필터를 리버스 방법을 사용할 수 없다는 콘솔에 문제가 발생하여 수정했습니다. 또한 Angular가 원래 ng-repeat 지시문에서 사용하기 때문에 객체의 무결성을 유지하고 싶었습니다. 이 경우 콘솔에 중복이 있다고 말하면서 화가 났기 때문에 바보 (키) 입력을 사용했으며 내 경우에는 $ index로 추적해야했습니다.

필터: 

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

아무도 언급하지 않은 답변 하나를 추가하고 있습니다. 서버가 있다면 서버가 그렇게하려고합니다. 서버가 많은 레코드를 반환하면 클라이언트 측 필터링이 위험 할 수 있습니다. 페이징을 추가해야 할 수도 있기 때문입니다. 서버에서 페이징 한 경우 클라이언트 필터는 주문시 현재 페이지에 있습니다. 최종 사용자를 혼란스럽게 할 것입니다. 따라서 서버가있는 경우 전화로 주문을 보내고 서버가 반환하도록하십시오.

— 젠스 알레 니 우스
소스
0

유용한 팁 :

당신은 바닐라 Js로 배열을 뒤집을 수 있습니다 : yourarray .reverse ()

주의 : reverse는 파괴적이므로 변수뿐만 아니라 배열도 변경됩니다.

— 케빈
소스
-2

필터를 만들거나 사용하는 것보다 항상 배열 기본 역방향 방법을 사용하는 것이 좋습니다 $index.

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

Plnkr_demo .

— Vishnudas Tekale Kulkarni
소스
원래 배열을 되돌리고 있습니다 ... 반복되는 새 배열을 반환하는 것이 좋습니다.
— Vandervidi
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.