বিপরীতে কৌনিক এনজি-রিপিট


227

কৌণিক ক্ষেত্রে আমি কীভাবে বিপরীত অ্যারে পেতে পারি? আমি অর্ডারবাই ফিল্টার ব্যবহার করার চেষ্টা করছি, তবে এটি বাছাই করার জন্য একটি প্রিডিকেট (যেমন 'নাম') দরকার:

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

4
এই নতুন এবং সঠিক উপায় stackoverflow.com/a/16261373/988830
om471987

@ কিউইটনাথিং কিছুই হ'ল সঠিক উপায় যদি আপনি কোনও অভিব্যক্তি দিয়ে কোনও অ্যারে বিপরীত করতে চান। এই ক্ষেত্রে, প্রশ্ন ছিল কীভাবে একটি ছাড়া কোনও অ্যারে শ্রদ্ধা করা যায় ।
JayQuerie.com

<ট্র এনজি-রিপিট = "বন্ধুদের মধ্যে বন্ধু | অর্ডার বাই: '- নাম'">
দেশমাটি

সহজ 1 লাইন এবং সঠিক সমাধানের জন্য নীচে আমার উত্তরটি দেখুন। কোনও পদ্ধতি তৈরি করার দরকার নেই। আমি ভাবছি কেন লোকেরা এ জন্য অতিরিক্ত পদ্ধতি তৈরি করছে।
মুহাম্মদ হাসাম

ng-repeatআচরণ পরিবর্তন করার জন্য সর্বদা ফিল্টার ব্যবহার করুন! @ ট্রেভর সিনিয়র একটি ভাল কাজ করেছেন।
আমির সাভান্দ

উত্তর:


329

আমি এটির মতো একটি কাস্টম ফিল্টার ব্যবহার করার পরামর্শ দেব:

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

যা এর পরে ব্যবহার করা যেতে পারে:

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

এটি এখানে কাজ করে দেখুন: প্লঙ্কার বিক্ষোভ


এই ফিল্টারটি আপনার প্রয়োজন অনুসারে ফিট হিসাবে কাস্টমাইজ করা যায়। আমি বিক্ষোভের অন্যান্য উদাহরণ সরবরাহ করেছি। কিছু বিকল্পের মধ্যে বিপরীত সম্পাদনের আগে ভেরিয়েবলটি একটি অ্যারে রয়েছে তা পরীক্ষা করে নেওয়া বা স্ট্রিংয়ের মতো আরও কিছু জিনিসগুলির বিপরীতটিকে অনুমতি দেওয়ার জন্য আরও হালকা করে তোলা অন্তর্ভুক্ত রয়েছে।


21
নিস! কেবল সচেতন থাকুন যে items.reverse()কেবল একটি নতুন তৈরি এবং এটির পরিবর্তে অ্যারে পরিবর্তন করে।
অ্যান্ডার্স একদাহল

12
ধন্যবাদ! আমি এটা অবহেলা ছিল। আমি slice()এই সমস্যাটি সমাধানের জন্য চেষ্টা করেছিলাম ।
JayQuerie.com

9
if (!angular.isArray(items)) return false;এটির বিপরীত করার চেষ্টা করার আগে আপনার কাছে অ্যারে রয়েছে তা যাচাই করতে আপনার যুক্ত করা উচিত ।
শ্রদ্ধাবাদ কোড

6
নাল থেকে আরও প্রতিরক্ষামূলক হওয়া প্রয়োজন, পরিবর্তে নিম্নলিখিত ব্যবহার করা উচিত: আইটেম ফেরত? আইটেম.স্লাইস ()। বিপরীত (): [];
ক্রিস ইয়েং

5
@ ক্রিস ইয়েং: শূন্য হলে "[]" খালি ফিরে আসার পরামর্শ দেওয়া হচ্ছে না। আসল মান ফেরত দেওয়া ভাল।
শিভা

202

এটি আমি ব্যবহার করেছি:

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

হালনাগাদ:

আমার উত্তরটি Angular এর পুরানো সংস্করণের জন্য ঠিক ছিল। এখন, আপনি ব্যবহার করা উচিত

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

অথবা

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

https://stackoverflow.com/a/26635708/1782470 থেকে


উনিং track by, এটিই আমার জন্য একমাত্র উপায়

অর্ডার দেওয়ার পরে ডেলবাউড আপনার ট্র্যাকটি ব্যবহার করা উচিত বাই:ng-repeat="friend in friends | orderBy:'+': true track by $index"
বিভূম ভরদ্বাজ

125

এক বছর পরে এটি আনার জন্য দুঃখিত, তবে একটি নতুন, সহজ সমাধান রয়েছে , যা কৌণিক v1.3.0-rc.5 এবং তার পরে কাজ করে

দস্তাবেজে এটি উল্লেখ করা হয়েছে : "যদি কোনও সম্পত্তি সরবরাহ না করা হয় (যেমন '' + ') তবে অ্যারে উপাদানটি স্বয়ংক্রিয়ভাবে কোথায় বাছাইয়ের তুলনা করতে ব্যবহৃত হয়"। সুতরাং, সমাধানটি হবে:

ng-repeat="friend in friends | orderBy:'-'" অথবা

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

এই সমাধানটি আরও ভাল বলে মনে হচ্ছে কারণ এটি কোনও অ্যারে সংশোধন করে না এবং অতিরিক্ত গণ্য সংস্থান প্রয়োজন না (অন্তত আমাদের কোডে)। আমি সমস্ত বিদ্যমান উত্তরগুলি পড়েছি এবং এখনও তাদের কাছে এটির একটি পছন্দ করি।


1
বখশিশের জন্য ধন্যবাদ! অন্য যে কেউ এটি পড়ার শিরোনাম হিসাবে, দেখে মনে হচ্ছে এটি আরসি 4 ( v1.3.0-rc.4) তে কাজ করে না । কেউ যদি নতুন রিলিজে এটি চেষ্টা করার সুযোগ পান তবে আমাদের জানান!
মিকর্ম্কনিল

1
@ মিকর্মকনিল মন্তব্যের জন্য ধন্যবাদ! একই ডকুমেন্টেশন মতে এটা থেকে শুরু কাজ করা উচিত v1.3.0-rc.5( rc.5 ডক্স বনাম rc.4 ডক্স )। আমি উত্তরটি আপডেট করেছি
দিমিত্রি গনচর

1
আমার জন্য কাজ করছে না (v1.3.5)। চেষ্টা করা হয়েছে orderBy:'+':true, orderBy:'-':true, orderBy:'-':false, orderBy:'+':false:(
কোডি

2
@ দেরী উত্তরের জন্য দুঃখিত। এখানে আপনি যান - কৌণিক v1.3.5 jsfiddle.net/dmitry_gonchar/L98foxhm/1 সহ একটি কার্যকারী উদাহরণ । সম্ভবত সমস্যাটি অন্য জায়গায় ছিল।
দিমিত্রি গনচর

1
@alevkon সত্য আপনি যদি ক্ষেত্রটি নির্দিষ্ট করে থাকেন তবে এটি কাজ করবে ('+ id', '-id' ফী)। হতে পারে এটি কৌণিক এ একটি বাগ, আপনি যদি কোনও ক্ষেত্র নির্দিষ্ট না করেন তবে এটি স্বাভাবিক ক্রম দিয়ে কাজ করে না? আমি ডক্স থেকে এই পদ্ধতিটি নিয়েছি (লিঙ্কটি উত্তরটিতে রয়েছে), তাই আপনার পাশাপাশি আমিও অবাক হয়েছি। যাইহোক, প্রশ্নটি ছিল কীভাবে অ্যারেটিকে বিপরীত করা যায়
দিমিত্রি গনচর

54

আপনি $ সূচক পরামিতি দ্বারা বিপরীত করতে পারেন

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

13
কাজ করা উচিত, তবে কাজ করে না (চারপাশে উদ্ধৃতি সহ এবং ছাড়া $index) আমি কৌণিক 1.1.5 এ আছি।
ইঞ্জিনিয়ার

2
আমার জন্য কাজ করেছেন (যদিও $ সূচির পরিবর্তে বাছাইয়ের জন্য একটি সম্পত্তি ব্যবহার
সার্টস

4
AngularJS 1.2.13 এর সাথে কাজ করে না। আমি প্রতিটি অবজেক্টে আইডি যুক্ত করতে আমার অবজেক্টগুলির অ্যারেটি সংশোধন করেছি। অ্যারের ভিতরে থাকা আইডিটি সূচকটি। তারপরে ng-repeat="friend in friends | orderBy:'id':true"কাজ করে।
tanguy_k


17

আপনি আপনার স্কোপের কোনও পদ্ধতিটিকে এটির জন্য আপনার বিপরীতে কল করতে পারেন, যেমন:

<!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মূল অ্যারেটি সংশোধন করে।


13

আপনি যদি 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


11

আপনি যদি কৌণিক জালস সংস্করণ ১.৪.৪ এবং তার বেশি ব্যবহার করে থাকেন তবে " $ সূচক " ব্যবহার করে বাছাই করার একটি সহজ উপায় ।

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

ডেমো দেখুন


1

কৌনিকের সাথে .NET তে এমভিসি ব্যবহার করার সময় আপনি নিজের ডিবি ক্যোয়ারিটি করার সময় সর্বদা অর্ডারবাইডিসেন্ডিং () ব্যবহার করতে পারেন:

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

তারপরে কৌণিক দিক থেকে এটি ইতিমধ্যে কিছু ব্রাউজারে (আইই) বিপরীত হবে। ক্রোম এবং এফএফ সমর্থন করার সময়, আপনাকে তখন অর্ডার বাই দ্বারা যুক্ত করতে হবে:

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

এই উদাহরণস্বরূপ, আপনি .ড সম্পত্তি হিসাবে ক্রম অবতরণ অনুসারে বাছাই করা হবে। আপনি যদি পেজিং ব্যবহার করছেন তবে এটি আরও জটিল হয়ে ওঠে কারণ কেবল প্রথম পৃষ্ঠার বাছাই করা হবে। আপনার নিয়ামকের জন্য বা অন্য কোনও উপায়ে এটি .js ফিল্টার ফাইলের মাধ্যমে আপনাকে হ্যান্ডেল করতে হবে।


0

আপনি .revers () ব্যবহার করতে পারেন। এটি একটি নেটিভ অ্যারে ফাংশন

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


আপনার ডাউন-ভোট কেবলমাত্র একটি জিনিস বোঝাতে পারে: আপনার কাছে আরও আগত ডেটা রয়েছে। যদি {} বা [] ডেটা পেতে থাকে তবে এটি প্রতিবারই বিপরীত হবে, স্পষ্টতই। এটি একটি নতুন ডাইজেস্ট
Pian0_M4n

যে কেউ এটি ব্যবহার করতে চায় তার জন্য সতর্কতা: reverseস্থানে অ্যারেটি বিপরীত করে, এটি কেবল বিপরীত অনুলিপিটি দেয় না। এর অর্থ হ'ল প্রতিবার এটি মূল্যায়ন করা হলে অ্যারেটি বিপরীত হবে।
jcaron

0

এর কারণ আপনি JSON অবজেক্ট ব্যবহার করছেন। আপনি যখন এ জাতীয় সমস্যার মুখোমুখি হন তবে আপনার JSON অবজেক্টটিকে JSON অ্যারে অবজেক্টে পরিবর্তন করুন।

উদাহরণ স্বরূপ,

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

0

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>

0

আমি এর মতো কিছু পেয়েছি তবে অ্যারের পরিবর্তে আমি বস্তুগুলি ব্যবহার করি।

বস্তুর জন্য আমার সমাধানটি এখানে:

কাস্টম ফিল্টার যুক্ত করুন:

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

0

আমি নিজেই এই সমস্যায় হতাশ হয়ে পড়েছিলাম এবং তাই @ ট্র্যাভর সিনিয়র দ্বারা তৈরি করা ফিল্টারটি আমি সংশোধন করেছি কারণ আমি আমার কনসোলটি নিয়ে বলছিলাম যে এটি বিপরীত পদ্ধতিটি ব্যবহার করতে পারে না। আমিও, অবজেক্টের অখণ্ডতা বজায় রাখতে চেয়েছিলাম কারণ এটি এঙ্গুলারটি মূলত এনজি-রিপিট নির্দেশিকায় ব্যবহার করছে। এই ক্ষেত্রে আমি বোকা (কী) এর ইনপুটটি ব্যবহার করেছি কারণ কনসোলটি বলে নকল রয়েছে এবং আমার ক্ষেত্রে আমাকে $ সূচী দ্বারা ট্র্যাক করা দরকার বলে বিরক্ত হবে।

ছাঁকনি:

angular.module('main').filter('reverse', function() {
    return function(stupid, items) {
    var itemss = items.files;
    itemss = itemss.reverse();  
    return items.files = itemss; 
  };
});

এইচটিএমএল: <div ng-repeat="items in items track by $index | reverse: items">


0

আমি একটি উত্তর যুক্ত করছি যা কেউ উল্লেখ করেনি। আমি চেষ্টা করি সার্ভারটি যদি এটি থাকে তবে এটি করতে পারি। সার্ভার প্রচুর রেকর্ড ফিরিয়ে দিলে ক্লায়েন্টাইড ফিল্টারিং বিপজ্জনক হতে পারে। কারণ আপনি পেজিং যুক্ত করতে বাধ্য হতে পারেন। আপনার যদি সার্ভার থেকে পেজিং থাকে তবে ক্লায়েন্ট ফিল্টার ক্রম অনুসারে, বর্তমান পৃষ্ঠায় থাকবে। যা শেষ ব্যবহারকারীকে বিভ্রান্ত করবে। সুতরাং আপনার যদি কোনও সার্ভার থাকে, তবে কল দিয়ে অর্ডারবাইটি প্রেরণ করুন এবং সার্ভারটি এটি ফেরত দিন।


0

দরকারী টিপ:

আপনি ভ্যানিলা জেসের সাথে আপনার অ্যারের বিপরীত করতে পারেন: ইউরাররে। রিভার্স ()

সতর্কতা: বিপরীত ধ্বংসাত্মক, সুতরাং এটি আপনার অ্যারে পরিবর্তন করবে, কেবল পরিবর্তনশীল নয়।


-2

আমি অ্যারে নেটিভ বিপরীত পদ্ধতিটি ব্যবহার করে ফিল্টার তৈরি করা বা ব্যবহারের চেয়ে সর্বদা ভাল পছন্দ $index

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

Plnkr_demo


আপনি আসল অ্যারেটি বিপরীত করছেন ... বিপরীত একটি নতুন অ্যারে ফিরিয়ে দেওয়া আরও ভাল অনুশীলন।
বান্দরভিদি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.