blocks|key|328405|text|根据documentation的说法，您可以使用reverse参数。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|328406|filter:orderBy(array,+expression[,+reverse]);|code-block|syntax|javascript|328407|将筛选器更改为：|328408|orderBy:+'created_at':true|328409|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/filter/orderBy#orderBy-arguments^0|O|7|2|D|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>According to <a href="https://docs.angularjs.org/api/ng/filter/orderBy#orderBy-arguments" rel="noreferrer">documentation</a> you can use the <code>reverse</code> argument.</p>

<pre><code>filter:orderBy(array, expression[, reverse]);
</code></pre>

<p>Change your filter to:</p>

<pre><code>orderBy: 'created_at':true
</code></pre>


blocks|key|111011|text|您可以在orderBy中为参数加上前缀'-‘，以使其具有降序而不是升序。我会这样写：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|111012|<div+class="recent"+
+++ng-repeat="reader+in+book.reader+%7C+orderBy:+'-created_at'+%7C+limitTo:+1">
</div>|code-block|syntax|javascript|111013|过滤器orderBy的文档中也说明了这一点。|111014|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.filter%253aorderBy^0|4|7|0|0|3|7|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>You can prefix the argument in <code>orderBy</code> with a '-' to have descending order instead of ascending. I would write it like this:</p>

<pre><code>&lt;div class="recent" 
   ng-repeat="reader in book.reader | orderBy: '-created_at' | limitTo: 1"&gt;
&lt;/div&gt;
</code></pre>

<p>This is also stated in the documentation for the filter <a href="http://docs.angularjs.org/api/ng.filter%3aorderBy">orderBy</a>.</p>


blocks|key|328469|text|和一个代码示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328470|<div+ng-app>
++++<div+ng-controller="FooController">
++++++++<ul+ng-repeat="item+in+items+%7C+orderBy:'num':true">
++++++++++++<li>{{item.num}}+::+{{item.desc}}</li>
++++++++</ul>
++++</div>
</div>|code-block|syntax|javascript|328471|和JavaScript：|328472|function+FooController($scope)+{
++++$scope.items+=+[
++++++++{desc:+'a',+num:+1},
++++++++{desc:+'b',+num:+2},
++++++++{desc:+'c',+num:+3},
++++];
}|328473|将为您提供：|328474|3+::+c
2+::+b
1+::+a|328475|在JSFiddle上：http://jsfiddle.net/agjqN/|offset|length|328476|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/agjqN/^0|0|0|0|0|0|0|B|Q|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>And a code example:</p>

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

<p>And the JavaScript:</p>

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

<p>Will give you:</p>

<pre><code>3 :: c
2 :: b
1 :: a
</code></pre>

<p>On JSFiddle: <a href="http://jsfiddle.net/agjqN/">http://jsfiddle.net/agjqN/</a></p>


blocks|key|111074|text|也许这对某些人很有用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|111075|在我的例子中，我得到了一个对象数组，每个对象都包含一个由Mongoose设置的日期。|111076|我使用：|111077|ng-repeat="comment+in+post.comments+%7C+orderBy+:+sortComment+:+true"|code-block|syntax|javascript|111078|并定义了函数：|111079|$scope.sortComment+=+function(comment)+{
++++var+date+=+new+Date(comment.created);
++++return+date;
};|111080|这对我很有效。|111081|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Perhaps this can be useful for someone:</p>

<p>In my case, I was getting an array of objects, each containing a date set by Mongoose.</p>

<p>I used:</p>

<pre><code>ng-repeat="comment in post.comments | orderBy : sortComment : true"
</code></pre>

<p>And defined the function:</p>

<pre><code>$scope.sortComment = function(comment) {
    var date = new Date(comment.created);
    return date;
};
</code></pre>

<p>This worked for me.</p>


blocks|key|328537|text|在我的例子中，orderBy由一个选择框决定。我更喜欢Ludwig的响应，因为您可以在选择选项中设置排序方向，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328538|++++++++$scope.options+=+[
++++++++++++{+label:+'Title',+value:+'title'+},
++++++++++++{+label:+'Newest',+value:+'-publish_date'+},
++++++++++++{+label:+'Featured',+value:+'-featured'+}
++++++++];+|code-block|syntax|javascript|328539|标记：|328540|<select+ng-model="orderProp"+ng-options="opt+as+opt.label+for+opt+in+options"></select>
<ul>
++++<li+ng-repeat="item+in+items+%7C+orderBy:orderProp.value"></li>
</ul>|328541|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In my case, the orderBy is determined by a select box. I prefer Ludwig's response because you can set the sort direction in the select options as such: </p>

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

<p>markup:</p>

<pre><code>&lt;select ng-model="orderProp" ng-options="opt as opt.label for opt in options"&gt;&lt;/select&gt;
&lt;ul&gt;
    &lt;li ng-repeat="item in items | orderBy:orderProp.value"&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>


blocks|key|328553|text|请参见w3schools示例：https://www.w3schools.com/angular/angular_filters.asp+https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|328554|然后添加"reverse“标志：|328555|<!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%25">
<tr>
<th+ng-click="orderByMe('name')">Name</th>
<th+ng-click="orderByMe('country')">Country</th>
</tr>
<tr+ng-repeat="x+in+names+%7C+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>|code-block|syntax|javascript|328556|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/angular/angular_filters.asp|1|https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click^0|F|1H|0|1X|29|1|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

<p>see w3schools samples:
<a href="https://www.w3schools.com/angular/angular_filters.asp" rel="nofollow noreferrer">https://www.w3schools.com/angular/angular_filters.asp</a>
<a href="https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click" rel="nofollow noreferrer">https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click</a></p>

<p>then add the "reverse" flag:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;
&lt;body&gt;

&lt;p&gt;Click the table headers to change the sorting order:&lt;/p&gt;

&lt;div ng-app="myApp" ng-controller="namesCtrl"&gt;

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

&lt;/div&gt;

&lt;script&gt;
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;
    }
});
&lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|328565|text|我的建议使用moment()很容易管理日期，如果它们是字符串值|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328566|//controller
$scope.sortBooks+=+function+(reader)+{
++++++++++++var+date+=+moment(reader.endDate,+'DD-MM-YYYY');
++++++++++++return+date;
++++++++};

//template

ng-repeat="reader+in+book.reader+%7C+orderBy+:+sortBooks+:+true"|code-block|syntax|javascript|328567|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>My advise use moment() is easy to manage dates if they are strings values</p>

<pre><code>//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"
</code></pre>


blocks|key|328579|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|328580|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'+}
++++++++++];+
++++++++
})|code-block|syntax|javascript|328581|<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+%7C+toArray+%7C+orderBy:'created_at':true"+>
++++++++++{{logs.event}}+-+Date+:+{{logs.created_at}}
++++</li>
++</ul>
++
++<br>
++
++
++<h4>Ascending</h4>
++<ul>
++++<li+ng-repeat="logs+in+logData+%7C+toArray+%7C+orderBy:'created_at':false"+>
++++++++++{{logs.event}}+-+Date+:+{{logs.created_at}}
++++</li>
++</ul>
++
</div>|328582|328583|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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' }
          ]; 
        
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"&gt;&lt;/script&gt;

&lt;div ng-app="myApp" ng-controller="mainCtrl"&gt;

  &lt;h4&gt;Descending&lt;/h4&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="logs in logData | toArray | orderBy:'created_at':true" &gt;
          {{logs.event}} - Date : {{logs.created_at}}
    &lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;br&gt;
  
  
  &lt;h4&gt;Ascending&lt;/h4&gt;
  &lt;ul&gt;
    &lt;li ng-repeat="logs in logData | toArray | orderBy:'created_at':false" &gt;
          {{logs.event}} - Date : {{logs.created_at}}
    &lt;/li&gt;
  &lt;/ul&gt;
  
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<pre><code>&lt;div class="recent" ng-repeat="reader in
    (filteredItems = (book.reader | orderBy: 'created_at' | limitTo: 1))"&gt;
&lt;/div&gt;
</code></pre>

<p>So the book comes from rest api and it has many readers attached. I want to get the 'recent' reader.</p>

<p>The <code>created_at</code> field has the value which identifies the user as recent. But the above code gives me the oldest reader. So the order needs to be inversed? Is there some way to have the sorting in descending order?</p>


Descending order by date filter in AngularJs

<div class="recent" ng-repeat="reader in    (filteredItems = (book.reader | orderBy: 'created_at' | limitTo: 1))"></div>所以这本书来自rest api，它有很多读者。我想要最新的阅读器。created...

问AngularJs中的降序按日期排序过滤器
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs中的降序按日期排序过滤器EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs中的降序按日期排序过滤器
EN