এনজি-রিপিট: একক ক্ষেত্র অনুসারে ফিল্টার করুন


484

আমার কাছে এমন একটি পণ্যের অ্যারে রয়েছে যা আমি এনজি-রিপিট ব্যবহার করে পুনরাবৃত্তি করছি এবং ব্যবহার করছি

<div ng-repeat="product in products | filter:by_colour"> 

রঙ দ্বারা এই পণ্যগুলি ফিল্টার। ফিল্টারটি কাজ করছে তবে যদি পণ্যের নাম / বিবরণ ইত্যাদিতে রঙ থাকে তবে ফিল্টার প্রয়োগের পরে পণ্যটি থেকে যায়।

আমি ফিল্টারটি কীভাবে প্রতিটি ক্ষেত্রের চেয়ে কেবলমাত্র আমার অ্যারের রঙের ক্ষেত্রে প্রয়োগ করতে পারি?


কাস্টম ফিল্টারগুলি শক্তিশালী = হয়), আপনি এটা পছন্দ করতে পারেন উদাহরণ: noypi-linux.blogspot.com/2014/07/...
Noypi Gilas

ভিন্ন সমাধান: stackoverflow.com/a/24992197/257470
andrew.fox

দুর্দান্ত কাজের বানানটি সঠিকভাবে করুন
মাইককুলস

উত্তর:


475

ফিল্টার পৃষ্ঠায় উদাহরণটি দেখুন । কোনও অবজেক্ট ব্যবহার করুন এবং রঙের বৈশিষ্ট্যে রঙ সেট করুন:

Search by color: <input type="text" ng-model="search.color">
<div ng-repeat="product in products | filter:search"> 

ধন্যবাদ মার্ক, নীচে প্রস্তাবিত পদ্ধতির চেয়ে এইভাবে এটি করার কোনও সুবিধা আছে কি?
টিম ওয়েবস্টার

7
@ সেগলেসপান, সত্যই নয়। আপনি দেখতে পাবেন যে বিমলাইট এবং ব্লেশ উপস্থাপিত পদ্ধতিটি ভাল পড়ে, কারণ আপনি দেখতে পাচ্ছেন যে আপনি রঙের মাধ্যমে ফিল্টার করছেন। এই পদ্ধতিটি আরও কমপ্যাক্ট, যা আপনি একাধিক বৈশিষ্ট্য দ্বারা অনুসন্ধান করতে চাইলে দরকারী হতে পারে, এবং এইচটিএমএলে আপনার কোনও দীর্ঘ অবজেক্ট না থাকলে: filter:{ color: '...', size: '...', ...}
মার্ক রাজকক

2
@ মারকরাজাকক, আমি ছেদ না করে ইউনিয়নের দিকে তাকিয়ে একাধিক সম্পত্তি দ্বারা কীভাবে অনুসন্ধান করতে সক্ষম হব?
জেটকম

2
@jetcom, আপনি একটি কাস্টম ফিল্টার প্রয়োজন হবে, দেখতে stackoverflow.com/a/13845135/215945
মার্ক Rajcok

1
আমি জানি না যে ওপি যখন পৃষ্ঠায় পুনরাবৃত্তি করছে তখন কোনও এনজি-রিপিটে মানগুলি কীভাবে ফিল্টার করতে হবে তার অনুসন্ধান বাক্সটি কীভাবে তৈরি করা যায় তা জিজ্ঞাসা করছিল কিনা। এইটির নীচের উত্তরটি জিজ্ঞাসিত প্রশ্নের সাথে সবচেয়ে প্রাসঙ্গিক বলে মনে হচ্ছে।
twknab

573

colourআপনি যে ফিল্টারটি প্রয়োগ করতে চান সেই বৈশিষ্ট্যটি (যেমন ) উল্লেখ করুন :

<div ng-repeat="product in products | filter:{ colour: by_colour }">

5
আমি যদি চাই! ফিল্টার হিসাবে বাইক্যালোর: {রঙ:! by_colour} "
rjdmello

27
@rjdmello মাত্র শুরুতে যোগ '!'+, ভালো<div ng-repeat="product in products | filter:{ colour: '!'+by_colour }">
bmleite

3
যদি নিশ্চিত না আমি এটি সঠিকভাবে বোঝা, কিন্তু প্রথম জিনিস যে আমার মন আসেন ছিল: <div ng-repeat="product in products | filter:{ resultsMap.annie: '!!' }"> বা (কিছু সমতুল্য) ভালো: <div ng-repeat="product in products | filter:by">এবং নিয়ামক করুন: $scope.by = { 'resultsMap.annie': '!!' };। এই দ্বিতীয় পদ্ধতির আপনাকে ফিল্টার হওয়া সম্পত্তিটির উপর আরও নিয়ন্ত্রণ দেয়। দ্রষ্টব্য: '!!'অর্থ "নাল নয়"।
বিলেতে

2
@ ফেডেরিকো, এটি customFilterআপনার সাধারণ জিনিস হতে পারে scopeযা আপনি যখনই প্রয়োজন আপডেট করেন। এই প্লাঙ্কারটি পরীক্ষা করুন ।
বিএমলেট 0 '

1
এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। এটি সবচেয়ে সংক্ষিপ্তসার। ঠিক আছে, 'রঙ' বাদে অনেকগুলি স্বর রয়েছে।
র‌্যাপ

176

আপনি যে কোনও বস্তুর উপর ফিল্টার করতে হবে তার সাথে মিলে যাওয়া কোনও সম্পত্তি দিয়ে আপনি ফিল্টার করতে পারেন:

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'red' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});
<div ng-repeat="product in products | filter: { color: 'red' }"> 

এটি অবশ্যই ভেরিয়েবল দ্বারা পাস করা যেতে পারে, যেমন মার্ক রাজকোক পরামর্শ দিয়েছেন।


2
আসুন বলতে পারি যে আমার কাছে এই জাতীয় সুযোগ রয়েছে pr প্রডাক্টগুলি: {আইডি: 1, নাম: 'পরীক্ষা', রঙ: 'লাইটব্লিউ'}, {আইডি: 2, নাম: 'বব', রঙ: [{অগ্রভাগ: কালো, পটভূমি : সাদা}]}। তাহলে আমি কীভাবে রঙের ভিত্তিতে পণ্যটি ফিল্টার করতে পারি: সাদা মান পেতে ব্যাকগ্রাউন্ড?
গিরি

2
@ গ্যারি: সত্য, আমি মনে করি না আপনি পারবেন। যে কোনও উপায়ে, ফিল্টার ব্যবহার করা: মোটেই বাজে অভ্যাস, আইএমও sort এটি আপনার দৃষ্টিভঙ্গিতে যুক্তি রাখে যা সত্যই আপনার নিয়ামকের মধ্যে হওয়া উচিত এবং এটি খুব পরীক্ষামূলক নয়।
বেন লেশ

ফিল্টারিংটি নিয়ামককে সরানো এবং মডেলটি প্রসারিত করার এটি একটি উপায়। ozkary.com/2015/05/angularjs-value-mapping-with-dynamic.html
ওজকারি

106

আপনি যদি প্রদত্ত বস্তুর একটি নাতি (বা আরও গভীর) ফিল্টার করতে চান তবে আপনি নিজের অবজেক্টের শ্রেণিবিন্যাস তৈরি করতে চালিয়ে যেতে পারেন। উদাহরণস্বরূপ, আপনি যদি 'জিনিস.প্রপ্রেটিস.টাইটেল' এ ফিল্টার করতে চান তবে আপনি নিম্নলিখিতটি করতে পারেন:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter } }">

আপনি কেবল কোনও ফিল্টার অবজেক্টে যুক্ত করে কোনও বস্তুর একাধিক বৈশিষ্ট্যেও ফিল্টার করতে পারেন:

<div ng-repeat="thing in things | filter: { properties: { title: title_filter, id: id_filter } }">

2
এটি কি 'বা' টাইপ বা 'এবং' ফিল্টারের মতো।
এসএমএস

1
একই প্রশ্নটি হ'ল একটি এবং একটি বা এক বা একাধিক সম্পত্তি ফিল্টার করার সময়?
ট্রান্সলেশন

1
ও ফিল্টার করার জন্য একমাত্র উপায় হ'ল কাস্টম ফিল্টার, আমি মনে করি
দিমিত্রি আলগাজিন

99

এটি করার সর্বোত্তম উপায় হ'ল একটি ফাংশন ব্যবহার করা:

এইচটিএমএল

<div ng-repeat="product in products | filter: myFilter">

জাভাস্ক্রিপ্ট

$scope.myFilter = function (item) { 
    return item === 'red' || item === 'blue'; 
};

বিকল্পভাবে, আপনি নির্দিষ্ট মানদণ্ডের উপর ভিত্তি করে উপাদানগুলি গতিশীলভাবে দেখানোর জন্য এবং লুকানোর জন্য এনজিহাইড বা এনজি শো ব্যবহার করতে পারেন।


64

কৌণিক ফিল্টার সঙ্গে সাবধান। আপনি যদি ক্ষেত্রের নির্দিষ্ট মান নির্বাচন করতে চান তবে আপনি ফিল্টার ব্যবহার করতে পারবেন না।

উদাহরণ:

জাভাস্ক্রিপ্ট

app.controller('FooCtrl', function($scope) {
   $scope.products = [
       { id: 1, name: 'test', color: 'lightblue' },
       { id: 2, name: 'bob', color: 'blue' }
       /*... etc... */
   ];
});

এইচটিএমএল

<div ng-repeat="product in products | filter: { color: 'blue' }"> 

এটি উভয়ই নির্বাচন করবে, কারণ এর মতো কিছু ব্যবহার করুন substr
এর অর্থ আপনি এমন পণ্য নির্বাচন করতে চান যেখানে "রঙ" এ "নীল" স্ট্রিং থাকে এবং যেখানে "রঙ" "নীল" নয়।


88
<div ng-repeat="product in products | filter: { color: 'blue' }:true">কেবলমাত্র সঠিক ম্যাচগুলিতে কাজ করবে (শেষে 'সত্য' হবে তুলনাকারী যুক্তি: লিঙ্ক
মার্ক করুন

21

রঙ অনুসারে অনুসন্ধান করুন:

<input type="text" ng-model="searchinput">
<div ng-repeat="product in products | filter:{color:searchinput}">

আপনি একটি অভ্যন্তরীণ বাসাও করতে পারেন।

filter:{prop1:{innerprop1:searchinput}}

10

আপনি যদি নিম্নলিখিতগুলি করতেন:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

... আপনি কেবল আইটেম টাইপআইড 2 এবং আইটেম স্ট্যাটাস 1 এর আইটেম পাবেন না, আপনি আইটেম টাইপ 20, 22, 202, 123 এবং আইটেম স্ট্যাটাস 10, 11, 101, 123 সহ আইটেমগুলি পাবেন This কারণ এটি ফিল্টার: {.. ।} সিনট্যাক্সের মতো স্ট্রিংয়ের মতো ক্যোয়ারী রয়েছে।

তবে, আপনি যদি যুক্ত করতে চান : সত্য শর্ত, এটি সঠিক মিল অনুসারে ফিল্টার করবে:

<li class="active-item" ng-repeat="item in mc.pageData.items | filter: { itemTypeId: 2, itemStatus: 1 } : true | orderBy : 'listIndex'"
                id="{{item.id}}">
    <span class="item-title">{{preference.itemTitle}}</span>
</li>

4

আমার উপায় এই

subjcts is

[{"id":"1","title":"GFATM"},{"id":"2","title":"Court Case"},{"id":"3","title":"Renewal\/Validity"},{"id":"4","title":"Change of Details"},{"id":"5","title":"Student Query"},{"id":"6","title":"Complains"}]

উপ একটি ইনপুট ক্ষেত্র বা আপনার পছন্দসই যা

এর মতো প্রদর্শিত হচ্ছে

<div ng-if="x.id === sub" ng-repeat=" x in subjcts">{{x.title}}</div>

সাধারণভাবে এনজি-ইফ ব্যবহার করা একটি পরিষ্কার সমাধান
কিলিজো

4

filter:{color_name:by_colour}পরিবর্তে আপনার অবশ্যই ব্যবহার করা উচিত

filter:by_colour

আপনি যদি কোনও সামগ্রীর একক সম্পত্তির সাথে মিল রাখতে চান, তবে বস্তুর পরিবর্তে সেই সম্পত্তিটি লিখুন, অন্যথায় অন্য কিছু সম্পত্তি মিলবে।


1

আপনি ফিল্টার প্রয়োগ করতে চান এমন কোনও অবজেক্টের ফিল্টারে সম্পত্তি উল্লেখ করুন:

//Suppose Object
var users = [{
  "firstname": "XYZ",
  "lastname": "ABC",
  "Address": "HOUSE NO-1, Example Street, Example Town"
},
{
  "firstname": "QWE",
  "lastname": "YUIKJH",
  "Address": "HOUSE NO-11, Example Street1, Example Town1"
}]

আপনি কেবল ফিল্টারনেমে ফিল্টার প্রয়োগ করতে চান

<input type = "text" ng-model = "first_name_model"/>
<div ng-repeat="user in users| filter:{ firstname: first_name_model}">

0

আপনি যদি একটি ক্ষেত্রের জন্য ফিল্টার চান:

label>Any: <input ng-model="search.color"></label> <br>
<tr ng-repeat="friendObj in friends | filter:search:strict">

আপনি যদি সমস্ত ক্ষেত্রের জন্য ফিল্টার চান:

 label>Any: <input ng-model="search.$"></label> <br>
 <tr ng-repeat="friendObj in friends | filter:search:strict">

এবং https://docs.angularjs.org/api/ng/filter/filter আপনার জন্য ভাল

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