Programing

각도 ng- 반복

lottogame 2020. 4. 22. 08:07
반응형

각도 ng- 반복

각도 배열을 반대로 배열하려면 어떻게해야합니까? 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>

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

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

간단한 해결책 :-(어떤 방법도 만들 필요가 없습니다)

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

스코프에서 메소드를 호출하여 다음과 같이 되돌릴 수 있습니다.

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

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

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

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

데모보기

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 필터 파일을 통해 또는 다른 방법으로이를 처리해야합니다.

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

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

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

orderBy필터는 수행 정렬 안정된 각도 1.4.5 기준으로한다. (GitHub 풀 요청 https://github.com/angular/angular.js/pull/12408 참조 )

따라서 상수 술어 를 사용 하고 reverse다음으로 설정하면 충분 합니다 true.

<div ng-repeat="friend in friends | orderBy:0:true">{{friend.name}}</div>

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

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

맞춤 필터 추가 :

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;
};
}

나는이 문제에 대해 스스로 좌절감을 느꼈기 때문에 @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">

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

유용한 팁 :

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

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

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

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

Plnkr_demo .

참고 URL : https://stackoverflow.com/questions/15266671/angular-ng-repeat-in-reverse

반응형

'Programing' 카테고리의 다른 글

포커스가 생기면 EditText 내부의 모든 텍스트를 선택하십시오.  (0) 2020.04.22
BitBucket에서 이전 커밋의 전체 소스에 액세스하는 방법은 무엇입니까?  (0) 2020.04.22
Android에서 투명한 배경의 대화 상자  (0) 2020.04.22
Android-Facebook 앱의 키 해시  (0) 2020.04.22
CSS 내용 속성 : 텍스트 대신 HTML을 삽입 할 수 있습니까?  (0) 2020.04.22

'Programing'의 다른글

  • 현재글각도 ng- 반복

관련글

댓글

티스토리툴바