반응형
AngularJs의 날짜 필터별 내림차순
<div class="recent" ng-repeat="reader in
(filteredItems = (book.reader | orderBy: 'created_at' | limitTo: 1))">
</div>
그래서 이 책은 rest api에서 나왔고 많은 독자들이 애착을 가지고 있다.나는 '최근'의 독자를 갖고 싶다.
그created_at필드에는 사용자를 최근으로 식별하는 값이 있습니다.하지만 위의 코드는 나에게 가장 오래된 판독기를 준다.순서를 거꾸로 해야 한다는 건가요?내림차순으로 정렬할 수 있는 방법이 있나요?
설명서에 따르면reverse논쟁.
filter:orderBy(array, expression[, reverse]);
필터 변경 내용:
orderBy: 'created_at':true
인수 프리픽스는 에서 지정할 수 있습니다.orderBy'-'가 있으면 오름차순이 아니라 내림차순이 됩니다.이렇게 쓰고 싶어요.
<div class="recent"
ng-repeat="reader in book.reader | orderBy: '-created_at' | limitTo: 1">
</div>
이는 필터 orderBy 매뉴얼에도 기재되어 있습니다.
아마도 이것은 누군가에게 도움이 될 것이다.
내 경우, 나는 몽구스가 설정한 날짜가 포함된 오브젝트들을 배열하고 있었다.
사용:
ng-repeat="comment in post.comments | orderBy : sortComment : true"
그리고 함수를 정의했습니다.
$scope.sortComment = function(comment) {
var date = new Date(comment.created);
return date;
};
이건 나한테 효과가 있었어.
코드 예:
<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>
JavaScript:
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/
날짜별 내림차순 정렬
날짜를 내림차순으로 사용하여 레코드를 필터링하는 데 도움이 됩니다.
$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>
제 경우 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>
참조: w3nowledge 샘플:https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click
그런 다음 "flag" 플래그를 추가합니다.
<!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>
날짜 값이 문자열이면 관리하기 쉽다고 조언합니다.
//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"
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>언급URL : https://stackoverflow.com/questions/16261348/descending-order-by-date-filter-in-angularjs
반응형
'programing' 카테고리의 다른 글
| ng-repeat 내에서 Ng-click이 작동하지 않음 (0) | 2023.03.11 |
|---|---|
| Java Spring Security - 사용자.withDefaultPasswordEncoder()는 권장되지 않습니다. (0) | 2023.03.11 |
| Redux에서는 상세 복사가 필요합니까? (0) | 2023.03.11 |
| 왜 잭슨 2는 첫 번째 대문자를 인식하지 못하는가? 낙타의 경우 단어 길이가 한 글자밖에 되지 않는데? (0) | 2023.03.11 |
| Angular 체크박스와 ng클릭 (0) | 2023.03.11 |