कोणीय एनजी-रिपीट इन रिवर्स

Question

मैं कोणीय में उलट सरणी कैसे प्राप्त कर सकता हूं? मैं ऑर्डरबाय फिल्टर का उपयोग करने की कोशिश कर रहा हूं, लेकिन इसे सॉर्ट करने के लिए एक विधेय (जैसे 'नाम') की आवश्यकता है:

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

Comments

यह नया और सही तरीका है stackoverflow.com/a/16261373/988830

— om471987

यदि आप किसी एक्सप्रेशन के साथ किसी सरणी को उलटना चाहते हैं तो @QuiteNothing सही तरीका है। इस मामले में, सवाल यह था कि किसी एक के बिना किसी सरणी का सम्मान कैसे किया जाए ।

— JayQuerie.com

<tr एनजी-रिपीट = "दोस्तों में दोस्त। ऑर्डरबाय: '- नाम'">

— देस्मती

सरल 1 लाइन और सही समाधान के लिए नीचे मेरा उत्तर देखें। कोई विधि बनाने की आवश्यकता नहीं है। मुझे आश्चर्य है कि लोग इसके लिए अतिरिक्त तरीके क्यों बना रहे हैं।

— मुहम्मद हसाम

ng-repeatव्यवहार को बदलने के लिए हमेशा फ़िल्टर का उपयोग करें ! @ ट्रेवर सीनियर ने अच्छा काम किया।

— अमीर सावंद

Answer 1

मैं इस तरह से एक कस्टम फ़िल्टर का उपयोग करने का सुझाव दूंगा:

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

जो तब इस्तेमाल किया जा सकता है जैसे:

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

इसे यहां काम करते हुए देखें: प्लंकर प्रदर्शन

---

इस फिल्टर को अपनी आवश्यकताओं के अनुसार फिट किए जाने के लिए अनुकूलित किया जा सकता है। मैंने प्रदर्शन में अन्य उदाहरण दिए हैं। कुछ विकल्पों में यह जांचना शामिल है कि चर रिवर्स करने से पहले एक सरणी है, या इसे और अधिक उदार बनाने के लिए और अधिक चीजों को उलटने की अनुमति देता है जैसे कि तार।

Comments

अच्छा! बस इस बात से अवगत items.reverse()रहें कि किसी नए को बनाने और उसे वापस करने के बजाय सरणी को संशोधित करता है।

— एंडर्स एकडल

धन्यवाद! मैंने इसे नजरअंदाज कर दिया था। मैं slice()उस समस्या को हल करने के लिए अंदर फेंक दिया ।

— JayQuerie.com

आपको यह if (!angular.isArray(items)) return false;सत्यापित करने के लिए जोड़ना चाहिए कि आपके पास इसे उलटने का प्रयास करने से पहले एक सरणी है।

— सम्मान .कोड

अशक्त के खिलाफ अधिक रक्षात्मक होने की आवश्यकता है, इसके बजाय निम्नलिखित का उपयोग करना चाहिए: वापसी आइटम? items.slice ()। रिवर्स (): [];

— क्रिस यंग

@ क्रिस युंग: खाली होने पर "[]" वापस लौटने की सलाह नहीं। मूल मूल्य वापस करने के लिए बेहतर है।

— शिव

Answer 2

यह वही है जो मैंने इस्तेमाल किया:

<alert ng-repeat="alert in alerts.slice().reverse()" type="alert.type" close="alerts.splice(index, 1)">{{$index + 1}}: {{alert.msg}}</alert>

अपडेट करें:

मेरे जवाब में कोणीय के पुराने संस्करण के लिए ठीक था। अब, आपको उपयोग करना चाहिए

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

या

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

से https://stackoverflow.com/a/26635708/1782470

Comments

Uing track by, यह एकमात्र तरीका है जिसने मेरे लिए काम किया

@delboud आपको आर्डर के बाद ट्रैक का इस्तेमाल करना चाहिए:ng-repeat="friend in friends | orderBy:'+': true track by $index"

— विभा भारद्वाज

Answer 3

एक साल बाद इसे लाने के लिए क्षमा करें, लेकिन एक नया, आसान समाधान है , जो कोणीय v1.3.0-rc.5 और बाद में काम करता है ।

यह डॉक्स में उल्लेख किया गया है : "यदि कोई संपत्ति प्रदान नहीं की जाती है, (उदाहरण के लिए '+') तो सरणी तत्व का उपयोग स्वयं को उसी स्थान पर तुलना करने के लिए किया जाता है"। तो, समाधान होगा:

ng-repeat="friend in friends | orderBy:'-'" या

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

यह समाधान बेहतर प्रतीत होता है क्योंकि यह किसी सरणी को संशोधित नहीं करता है और अतिरिक्त कम्प्यूटेशनल संसाधनों (कम से कम हमारे कोड में) की आवश्यकता नहीं होती है । मैंने सभी मौजूदा उत्तर पढ़ लिए हैं और अभी भी उन्हें यही पसंद है।

Comments

पारितोषिक के लिए धन्यवाद! इसे पढ़ने वाले किसी और के लिए एक सिर के रूप में, ऐसा लगता है कि यह आरसी 4 ( v1.3.0-rc.4) में काम नहीं करता है । अगर किसी को नई रिलीज़ में इसे आज़माने का मौका मिले, तो हमें बताएं!

— mikermcneil

@mikermcneil टिप्पणी के लिए धन्यवाद! उसी प्रलेखन के अनुसार इसे v1.3.0-rc.5( rc.5 डॉक्स बनाम rc.4 डॉक्स ) से शुरू होना चाहिए । मैंने जवाब अपडेट किया है

— दिमित्री गॉनचर

मेरे लिए काम नहीं कर रहा है (v1.3.5)। की कोशिश की orderBy:'+':true, orderBy:'-':true, orderBy:'-':false, orderBy:'+':false:(

— कोड़ी

@ उत्तर देर से देने के लिए क्षमा करें। यहां आप जाते हैं - कोणीय v1.3.5 jsfiddle.net/dmitry_gonchar/L98foxhm/1 के साथ एक कार्यशील उदाहरण । शायद समस्या दूसरी जगह थी।

— दिमित्री गोन्चर

@alevkon सच। लेकिन यदि आप फ़ील्ड ('+ id', '-id' fe) निर्दिष्ट करते हैं तो यह काम करता है। शायद यह कोणीय में एक बग है, कि यह सामान्य क्रम के साथ काम नहीं करता है यदि आप एक फ़ील्ड निर्दिष्ट नहीं करते हैं? मैंने डॉक्स से यह तरीका लिया है (लिंक उत्तर में है), इसलिए मुझे आपके साथ-साथ आश्चर्य हुआ। वैसे भी, सवाल यह था कि किसी सरणी को उल्टा कैसे किया जाए ।

— दिमित्री गॉन्चर

Answer 4

आप $ इंडेक्स पैरामीटर द्वारा रिवर्स कर सकते हैं

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

Comments

काम करना चाहिए, लेकिन (बिना उद्धरण के साथ और बिना कोशिश किए $index)। मैं Angular 1.1.5 पर हूं।

— इंजीनियर

मेरे लिए काम किया (हालांकि $ index के बजाय छँटाई के लिए एक संपत्ति का उपयोग कर रहे थे) stackoverflow.com/questions/16261348/…

— Certs

AngularJS 1.2.13 के साथ काम नहीं करता है। मैंने प्रत्येक ऑब्जेक्ट में एक आईडी जोड़ने के लिए अपनी सरणी वस्तुओं को संशोधित किया। सरणी के अंदर वस्तु का सूचकांक होने वाला आईडी। फिर ng-repeat="friend in friends | orderBy:'id':true"काम करता है।

— tanguy_k

Answer 5

सरल उपाय: - (किसी भी तरीके को बनाने की आवश्यकता नहीं)

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

Comments

मेरे लिए बस ठीक काम करता है। धन्यवाद!

— हैंकस्पोरियो

Answer 6

आप इसे अपने लिए रिवर्स करने के लिए अपने दायरे में एक विधि कह सकते हैं, जैसे:

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

Answer 7

यदि आप 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

Answer 8

यदि आप angularjs संस्करण 1.4.4 और ऊपर का उपयोग कर रहे हैं , तो सॉर्ट करने का एक आसान तरीका " $ इंडेक्स " का उपयोग कर रहा है ।

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

डेमो देखें

Answer 9

Angular के साथ .NET में MVC का उपयोग करते समय आप हमेशा इस तरह से अपनी db क्वेरी करते समय OrderByDecending () का उपयोग कर सकते हैं:

var reversedList = dbContext.GetAll().OrderByDecending(x => x.Id).ToList();

फिर कोणीय पक्ष पर, यह पहले से ही कुछ ब्राउज़रों (आईई) में उलट जाएगा। Chrome और FF का समर्थन करते समय, आपको फिर ऑर्डर जोड़ना होगा:

<tr ng-repeat="item in items | orderBy:'-Id'">

इस उदाहरण में, आप .Id संपत्ति पर अवरोही क्रम में छंटनी करेंगे। यदि आप पेजिंग का उपयोग कर रहे हैं, तो यह अधिक जटिल हो जाता है क्योंकि केवल पहले पृष्ठ को ही सॉर्ट किया जाएगा। आपको अपने नियंत्रक के लिए .js फ़िल्टर फ़ाइल या किसी अन्य तरीके से इसे संभालना होगा।

Answer 10

आप .reverse () का भी उपयोग कर सकते हैं। यह एक देशी सरणी फ़ंक्शन है

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

Comments

आपके डाउन-वोट का केवल एक ही मतलब हो सकता है: आपके पास अधिक आवक डेटा है। यदि {} या [] डेटा प्राप्त करता रहता है, तो यह हर बार उल्टा होगा। यह एक नया पाचन है

— Pian0_M4n

जो कोई भी इसका उपयोग करना चाहता है उसके लिए चेतावनी: reverseजगह में सरणी को उलट देता है, यह सिर्फ एक उलट प्रति वापस नहीं करता है। इसका मतलब यह है कि हर बार जब यह मूल्यांकन किया जाता है, तो सरणी उलट जाएगी।

— जकारोन

Answer 11

ऐसा इसलिए है क्योंकि आप JSON ऑब्जेक्ट का उपयोग कर रहे हैं। जब आप ऐसी समस्याओं का सामना करते हैं तो अपने JSON ऑब्जेक्ट को JSON Array ऑब्जेक्ट में बदल दें।

उदाहरण के लिए,

{"India":"IN","America":"US","United Kingdon":"UK"} json object
[{"country":"India","countryId":"IN"},{"country":"America","countryId":"US"},{"country":"United Kingdon","countryId":"UK"}] 

Answer 12

orderByफिल्टर प्रदर्शन एक स्थिर छँटाई कोणीय 1.4.5 के रूप में। (गिटहब पुल अनुरोध देखें https://github.com/angular/angular.js/pull/12408 ।)

तो यह एक निरंतर विधेय का उपयोग करने के लिए पर्याप्त है और इसके लिए reverseतैयार है true:

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

Answer 13

मुझे ऐसा कुछ मिला, लेकिन सरणी के बजाय मैं वस्तुओं का उपयोग करता हूं।

यहाँ वस्तुओं के लिए मेरा समाधान है:

कस्टम फ़िल्टर जोड़ें:

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

Answer 14

मैं खुद इस समस्या से निराश हो गया था और इसलिए मैंने @Trevor सीनियर द्वारा बनाए गए फिल्टर को संशोधित किया क्योंकि मैं अपने कंसोल के साथ एक समस्या में कह रहा था कि यह रिवर्स पद्धति का उपयोग नहीं कर सकता है। मैं भी वस्तु की अखंडता को बनाए रखना चाहता था क्योंकि यह वही है जो कोणीय मूल रूप से एनजी-रिपीट डायरेक्टिव में उपयोग कर रहा है। इस मामले में मैंने बेवकूफ (कुंजी) के इनपुट का उपयोग किया क्योंकि कंसोल यह कहते हुए परेशान हो जाएगा कि डुप्लिकेट हैं और मेरे मामले में मुझे $ सूचकांक द्वारा ट्रैक करने की आवश्यकता है।

फिल्टर:

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

Answer 15

Im एक उत्तर जोड़ रहा है जिसका किसी ने उल्लेख नहीं किया है। मैं सर्वर बनाने की कोशिश करूँगा यदि आपके पास एक है। क्लाइंट का फ़िल्टरिंग खतरनाक हो सकता है यदि सर्वर बहुत सारे रिकॉर्ड लौटाता है। क्योंकि आप पेजिंग जोड़ने के लिए मजबूर हो सकते हैं। यदि आपके पास सर्वर से पेजिंग है तो ऑर्डर पर क्लाइंट फ़िल्टर, वर्तमान पृष्ठ में होगा। जो अंतिम उपयोगकर्ता को भ्रमित करेगा। इसलिए यदि आपके पास सर्वर है, तो कॉल के साथ ऑर्डरबी भेजें और सर्वर को इसे वापस कर दें।

Answer 16

उपयोगी टिप:

आप वेनिला Js के साथ सरणी को उल्टा कर सकते हैं: yourarray .reverse ()

सावधानी: रिवर्स विनाशकारी है, इसलिए यह केवल चर ही नहीं, बल्कि एरी सरणी को भी बदल देगा।

Answer 17

मैं सरणी मूल रिवर्स मेथड का उपयोग करके सुसाइड करूंगा, फ़िल्टर बनाने या उपयोग करने पर हमेशा बेहतर विकल्प होता है $index।

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

Plnkr_demo ।

Comments

आप मूल सरणी को उलट रहे हैं ... एक बेहतर अभ्यास एक नया सरणी वापस करने के लिए होगा।

— वांडरवीडी