AngularJs에서 날짜 필터를 기준으로 내림차순

139 
<div class="recent" ng-repeat="reader in
    (filteredItems = (book.reader | orderBy: 'created_at' | limitTo: 1))">
</div>

따라서이 책은 나머지 API에서 나온 것이며 많은 독자들이 첨부되어 있습니다. '최근'독자를 얻고 싶습니다.

이 created_at필드에는 사용자를 최근으로 식별하는 값이 있습니다. 그러나 위의 코드는 나에게 가장 오래된 독자를 제공합니다. 따라서 순서를 뒤집어 야합니까? 내림차순으로 정렬하는 방법이 있습니까?

angularjs  angularjs-filter 
— 공감
소스

답변:

219

설명서 에 따르면 reverse인수를 사용할 수 있습니다 .

filter:orderBy(array, expression[, reverse]);

필터를 다음으로 변경하십시오.

orderBy: 'created_at':true
— CD..
소스
21
:쉼표 가 아닙니다. (다른 관찰하지 않는 사람들을 위해)
— ReactiveRaven
1
정렬 버튼을 원하면 true를 sortDirection으로 바꿀 수 있습니다. 그런 다음 범위에서 $ scope.sortDirection = true로 설정하십시오. 클릭 버튼은 ng-click = "sortDirection =! sortDirection"
— mbokil
1
이들은 단일 페이지에 완전한 테이블 데이터가있는 페이지에 대해서만 작동하지만 페이지 매김에는 작동하지 않습니다.
— ANK
문서에 대한 링크가 끊어졌습니다
— robert
180

인수 앞에 접두사 orderBy'-'를 붙여 오름차순 대신 내림차순을 가질 수 있습니다. 나는 이것을 다음과 같이 쓸 것이다.

<div class="recent" 
   ng-repeat="reader in book.reader | orderBy: '-created_at' | limitTo: 1">
</div>

이것은 필터 orderBy 에 대한 문서에도 명시되어 있습니다.

— 루트비히 매그너 손
소스
6
감사합니다. 주문을 되돌릴 수있는 빠르고 쉬운 방법입니다.
— LukeP
41

아마도 이것은 누군가에게 유용 할 수 있습니다.

제 경우에는 몽구스가 설정 한 날짜를 포함하는 객체 배열을 얻었습니다.

나는 사용했다 :

ng-repeat="comment in post.comments | orderBy : sortComment : true"

그리고 함수를 정의했습니다.

$scope.sortComment = function(comment) {
    var date = new Date(comment.created);
    return date;
};

이것은 나를 위해 일했습니다.

— Igorauad
소스
1
감사합니다. 내 날짜는 MMMM dd, YYYY 형식으로 입력 된 문자열이며 날짜 객체를 구성하는 메서드를 사용하지 않으면 각도를 올바르게 정렬하는 방법을 알 수 없었습니다. 매력처럼 일했다.
— Zargoon
이것은 올바른 방법입니다. 우리는 모든 날짜 형식으로이 방법을 사용할 수 있습니다. thanks boss
— Jethik
17

코드 예제 :

<div ng-app>
    <div ng-controller="FooController">
        <ul ng-repeat="item in items | orderBy:'num':true">
            <li>{{item.num}} :: {{item.desc}}</li>
        </ul>
    </div>
</div>

그리고 자바 스크립트 :

function FooController($scope) {
    $scope.items = [
        {desc: 'a', num: 1},
        {desc: 'b', num: 2},
        {desc: 'c', num: 3},
    ];
}

당신에게 줄 것이다 :

3 :: c
2 :: b
1 :: a

JSFiddle에서 : http://jsfiddle.net/agjqN/

— 닐스 봄
소스
7

내림차순 정렬

날짜가있는 레코드를 내림차순으로 필터링하는 데 도움이됩니다.

$scope.logData = [
            { event: 'Payment', created_at: '04/05/17 6:47 PM PST' },
            { event: 'Payment', created_at: '04/06/17 12:47 AM PST' },
            { event: 'Payment', created_at: '04/05/17 1:50 PM PST' }
        ]; 

<div ng-repeat="logs in logData | orderBy: '-created_at'" >
      {{logs.event}}
 </div>
— 디 네시 비타 주
소스
2

필자의 경우 orderBy는 선택 상자에 의해 결정됩니다. 선택 옵션에서 정렬 방향을 다음과 같이 설정할 수 있기 때문에 Ludwig의 응답을 선호합니다.

        $scope.options = [
            { label: 'Title', value: 'title' },
            { label: 'Newest', value: '-publish_date' },
            { label: 'Featured', value: '-featured' }
        ];

마크 업 :

<select ng-model="orderProp" ng-options="opt as opt.label for opt in options"></select>
<ul>
    <li ng-repeat="item in items | orderBy:orderProp.value"></li>
</ul>
— 남자 이름
소스
1
맞춤 정렬 기능에서는 작동하지 않는 것 같습니다. 사용자 정의 orderBy 함수를 사용하고 예제와 같이 <select>에서 정렬 할 매개 변수를 선택할 때 역 정렬하는 방법이 있습니까?
— cre8value
0

w3schools 샘플 참조 : https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

그런 다음 "reverse"플래그를 추가하십시오.

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<p>Click the table headers to change the sorting order:</p>

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr ng-repeat="x in names | orderBy:myOrderBy:reverse">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Carl',country:'Sweden'},
        {name:'Margareth',country:'England'},
        {name:'Hege',country:'Norway'},
        {name:'Joe',country:'Denmark'},
        {name:'Gustav',country:'Sweden'},
        {name:'Birgit',country:'Denmark'},
        {name:'Mary',country:'England'},
        {name:'Kai',country:'Norway'}
        ];

    $scope.reverse=false;
    $scope.orderByMe = function(x) {

        if($scope.myOrderBy == x) {
            $scope.reverse=!$scope.reverse;
        }
        $scope.myOrderBy = x;
    }
});
</script>

</body>
</html>
— 캄 피사노
소스
0

내 조언 사용 moment ()는 문자열 값인 경우 날짜를 관리하기 쉽습니다.

//controller
$scope.sortBooks = function (reader) {
            var date = moment(reader.endDate, 'DD-MM-YYYY');
            return date;
        };

//template

ng-repeat="reader in book.reader | orderBy : sortBooks : true"
— pabloRN
소스
0 

var myApp = angular.module('myApp', []);

myApp.filter("toArray", function () {
    return function (obj) {
        var result = [];
        angular.forEach(obj, function (val, key) {
            result.push(val);
        });
        return result;
    };
});


myApp.controller("mainCtrl", function ($scope) {

  $scope.logData = [
              { event: 'Payment', created_at: '10/10/2019 6:47 PM PST' },
              { event: 'Payment', created_at: '20/10/2019 12:47 AM PST' },
              { event: 'Payment', created_at: '30/10/2019 1:50 PM PST' }
          ]; 
        
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-app="myApp" ng-controller="mainCtrl">

  <h4>Descending</h4>
  <ul>
    <li ng-repeat="logs in logData | toArray | orderBy:'created_at':true" >
          {{logs.event}} - Date : {{logs.created_at}}
    </li>
  </ul>
  
  <br>
  
  
  <h4>Ascending</h4>
  <ul>
    <li ng-repeat="logs in logData | toArray | orderBy:'created_at':false" >
          {{logs.event}} - Date : {{logs.created_at}}
    </li>
  </ul>
  
</div>
스 니펫 확장

— 복부
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.