অ্যাঙ্গুলারজেসগুলিতে তারিখ ফিল্টার অনুসারে অবতরণ ক্রম


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

সুতরাং বইটি এপিআই থেকে এসেছে এবং এতে অনেক পাঠক সংযুক্ত রয়েছে। আমি 'সাম্প্রতিক' পাঠক পেতে চাই

created_atক্ষেত্রের মান যা সাম্প্রতিক ব্যবহারকারীর চিহ্নিত হয়েছে। তবে উপরের কোডটি আমাকে প্রাচীনতম পাঠক দেয়। তাহলে অর্ডার উল্টো করা দরকার? অবতরণ ক্রমে বাছাই করার কোনও উপায় আছে কি?

উত্তর:


219

ডকুমেন্টেশন অনুসারে আপনি reverseযুক্তিটি ব্যবহার করতে পারেন ।

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

আপনার ফিল্টারটি এতে পরিবর্তন করুন:

orderBy: 'created_at':true

21
এটি :কমা নয় নোট করুন । (অন্যান্য অ-পর্যবেক্ষণকারীদের জন্য)
প্রতিক্রিয়াভুক্ত

1
যদি আপনি একটি বাছাই বাটন চাইতেন তবে আপনি সঠিকভাবে সাজানোর নির্দেশকে বদলে দিতে পারেন। তারপরে আপনার স্কোপে সেট করুন $ সুযোগ.সোর্ট্ট ডাইরেক্টেশন = সত্য। ক্লিক বোতামটি এনজি-ক্লিকের মতো লাগবে = "সাজানো নির্দেশনা =! সাজানো নির্দেশিকা"
এমবোকিল

1
এগুলি কেবলমাত্র সেই পৃষ্ঠার জন্যই কাজ করছে যে কোনও একক পৃষ্ঠায় সম্পূর্ণ টেবিলের ডেটা রয়েছে, তবে এটি পৃষ্ঠাতে কাজ করবে না ..
এএনকে

ডকুমেন্টেশনের লিঙ্কটি নষ্ট হয়ে গেছে
রবার্ট

180

আপনি orderByআরোহণের পরিবর্তে অবতরণী ক্রম থাকতে একটি '-' দিয়ে যুক্তির উপসর্গ করতে পারেন। আমি এটি লিখতে হবে:

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

এই ফিল্টারের জন্য ডকুমেন্টেশন বিবৃত করা হয় orderBy


6
ধন্যবাদ, অর্ডারটি উল্টানোর জন্য এটি একটি দুর্দান্ত দ্রুত এবং সহজ উপায়।
লুকপি

41

সম্ভবত এটি কারও পক্ষে কার্যকর হতে পারে:

আমার ক্ষেত্রে, আমি অবজেক্টগুলির একটি অ্যারে পাচ্ছিলাম, যার প্রত্যেকটিতে মঙ্গুজের দ্বারা নির্ধারিত একটি তারিখ রয়েছে।

আমি ব্যবহার করতাম:

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

এবং ফাংশন সংজ্ঞায়িত:

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

এটি আমার পক্ষে কাজ করেছে।


1
ধন্যবাদ. আমার তারিখগুলি একটি এমএমএমএম ডিডি, ওয়াইওয়াই ফর্ম্যাটটিতে প্রবেশ করানো স্ট্রিংগুলি ছিল এবং আমি কোনও তারিখের অবজেক্ট তৈরির পদ্ধতি ব্যবহার না করে সেগুলি কীভাবে সঠিকভাবে সাজানোর জন্য কৌণিক পেতে হবে তা বুঝতে পারি না। কবজির মতো কাজ করেছেন।
জারগুন

এটি সঠিক পদ্ধতি .. আমরা যে কোনও তারিখের বিন্যাসে এই পদ্ধতিটি ব্যবহার করতে পারি .. ধন্যবাদ বস
জেঠিক

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

জেএসফিডেলে: 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

আমার ক্ষেত্রে, অর্ডারবাই একটি নির্বাচিত বাক্স দ্বারা নির্ধারিত হয়। আমি লুডভিগের প্রতিক্রিয়াটিকে পছন্দ করি কারণ আপনি বাছাই করা বিকল্পগুলিতে সারণির দিকনির্দেশটি সেট করতে পারেন:

        $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
এটি কাস্টম বাছাইয়ের ক্রিয়াগুলির সাথে কাজ করে বলে মনে হচ্ছে না। কাস্টম অর্ডারবাই ফাংশনটি ব্যবহার করে এবং আপনার উদাহরণের মতো <সিলেক্ট> থেকে পছন্দ করে অর্ডার করার জন্য একটি পরামিতি নির্বাচন করার সময় কি বিপরীত সাজানোর কোনও উপায় আছে?
cre8value

0

w3schools নমুনাগুলি দেখুন: https://www.w3schools.com/angular/angular_filters.asp https://www.w3schools.com/angular/tryit.asp?filename=try_ng_filters_orderby_click

তারপরে "বিপরীত" পতাকাটি যুক্ত করুন:

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

আমার পরামর্শ ব্যবহারের মুহূর্তটি () তারিখগুলি যদি স্ট্রিংয়ের মান হয় তবে তা পরিচালনা করা সহজ

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

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.