আমি কীভাবে AngularJS এর সাথে একটি অ্যারে ফিল্টার করব এবং ফিল্টার করা অবজেক্টের কোনও সম্পত্তি এনজি-মডেল বৈশিষ্ট্য হিসাবে ব্যবহার করব?

122

যদি আমার কাছে অবজেক্টগুলির একটি অ্যারে থাকে এবং আমি একটি ফিল্টারের উপর ভিত্তি করে যে কোনও একটি উপাদানের কোণে কৌণিক মডেলটি বাঁধতে চাই, আমি কীভাবে এটি করব? আমি একটি দৃ concrete় উদাহরণ দিয়ে আরও ভাল ব্যাখ্যা করতে পারি:

এইচটিএমএল:

<!DOCTYPE html>
<html ng-app>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
    <body ng-controller="MyCtrl">
        <input ng-model="results.year">
        <input ng-model="results.subjects.title | filter:{grade:'C'}">
    </body>
</html>

নিয়ন্ত্রক:

function MyCtrl($scope) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
}

জেএসবিন: http://jsbin.com/adisax/1/edit

আমি সাবজেক্টে দ্বিতীয় ইনপুটটি গ্রেড 'সি' দিয়ে ফিল্টার করতে চাই, তবে আমি মডেলটিকে গ্রেডে আবদ্ধ করতে চাই না ; আমি এটিকে 'সি' গ্রেডযুক্ত বিষয়ের শিরোনামে আবদ্ধ করতে চাই ।

এটি কি সম্ভব, এবং যদি তা হয় তবে কীভাবে এটি করা হয়?

angularjs

— বার্নহার্ড হফম্যান
সূত্র

127

<div ng-repeat="subject in results.subjects | filter:{grade:'C'}">
    <input ng-model="subject.title" />
</div>

— জেবি নিজেট
সূত্র

1

আমি দেখতে পাচ্ছি আপনি কোথায় যাচ্ছেন, তবে আমি সত্যিকার অর্থে রিপিটার চাইনি। আমি যে সম্পত্তিটি দিয়ে ফিল্টার করব তা হ'ল একটি পরিচয় কলাম, তাই এটি অনন্য। তবে আমি দেখতে পাচ্ছি যে এটি জেনেরিক সমস্যা সমাধানের সঠিক উপায়।

— বার্নহার্ড হোফম্যান

1

এটি ইতালীয়

— সিলভিও

10

এটি খুব সহায়ক ছিল, এবং filter:{grade:'!'+'C'}

— বিপরীতে

2

আপনি কি দিয়ে একই করতে পারেন grade array? আমার ক্ষেত্রে আমি ট্রিভিউ থেকে আমার গ্রেড অ্যারে তৈরি করি এবং অ্যারেতে থাকা ব্যক্তিদের জন্য ফলাফলটি ফিল্টার করতে চাই।

— হুয়ান কার্লোস ওরোপেজা

157

সমস্ত "সি" গ্রেড পেতে আপনি আপনার নিয়ামকটিতে "ফিল্টার" ফিল্টারটি ব্যবহার করতে পারেন। ফলাফল অ্যারের প্রথম উপাদানটি পাওয়া আপনাকে সেই বিষয়টির শিরোনাম দেবে যেখানে গ্রেড "সি" রয়েছে।

$scope.gradeC = $filter('filter')($scope.results.subjects, {grade: 'C'})[0];

http://jsbin.com/ewitun/1/edit

সরল ES6 এর সাথে একই:

$scope.gradeC = $scope.results.subjects.filter((subject) => subject.grade === 'C')[0]

— অলিভার
সূত্র

আমি দুঃখিত আমি সেই দ্বিতীয় ফিল্টারটি অনুসরণ করছি না ('ফিল্টার') আপনি কি আরও কিছু ব্যাখ্যা করতে পারবেন?

— উইনেমুকা

1

@ স্টেভেক এটি ফিল্টারটির নাম। ফিল্টার () পদ্ধতি আপনাকে ফিল্টার দেয়। এটি কেবল ফিল্টারকে ফিল্টার বলা হয় কারণ এটি একটি অ্যারে ফিল্টার করে। মুদ্রা ফিল্টারটির সাথে এটির মতো দেখতে পাবেন: $ ফিল্টার ('মুদ্রা') (পরিমাণ, প্রতীক, ভগ্নাংশ আকার

— অলিভার

61

এখানে কার্যকারী নমুনা সহ একটি সংশোধিত জেএসবিন রয়েছে:

http://jsbin.com/sezamuja/1/edit

আমি ইনপুটগুলিতে ফিল্টারগুলি দিয়ে যা করেছি তা এখানে:

<input ng-model="(results.subjects | filter:{grade:'C'})[0].title">

— lukeatdesignworks
সূত্র

1

এই বাস্তব চুক্তি। এই শক্তি। এটাই উপাই. আমি এই সঙ্গে গিয়েছিলাম এবং এখন আমি খুশি।

— ব্যবহারকারী 1576978

13

দয়া করে মনে রাখবেন, আপনি যদি এই জাতীয় ফিল্টার ব্যবহার করেন:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

এবং আপনি এর জন্য অন্য গ্রেড পেয়েছিলেন, ওহ আমি ডুনো, সিসি বা এসি বা সি + বা সিসিসি এটি এগুলিকে টানতে পারে। সঠিক ম্যাচের জন্য আপনাকে প্রয়োজনীয়তা যুক্ত করতে হবে:

$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'}, true);

আমি যখন কমিশন সম্পর্কিত কিছু বিবরণ এঁকে যাচ্ছিলাম তখন এটি আমাকে সত্যিই হত্যা করেছিল:

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}))[0];

কেবল কোনও বাগের জন্য ডাকতে হবে কারণ এটি 6 এর চেয়ে 56 টি কমিশন আইডিতে টানছিল।

সত্য বাহিনী যুক্ত করে একটি সঠিক ম্যাচ।

var obj = this.$filter('filter')(this.CommissionTypes, { commission_type_id: 6}, true))[0];

তবুও, আমি এটি পছন্দ করি (আমি টাইপস্ক্রিপ্ট ব্যবহার করি, তাই "লেট" এবং =>):

let obj = this.$filter('filter')(this.CommissionTypes, (item) =>{ 
             return item.commission_type_id === 6;
           })[0];

আমি এটি করি কারণ, রাস্তার এক পর্যায়ে, আমি ফিল্টার হওয়া ডেটা ইত্যাদি থেকে আরও কিছু তথ্য পেতে চাইব ... ডানদিকে ফাংশনটি হুবহু খোলা রেখে দেয়।

— ড্যানিয়েল মরিস
সূত্র

আপনার মতো একই ত্রুটি আমার ছিল, তৃতীয় বুলিয়ান প্যারামিটার সহ ইঙ্গিতটির জন্য ধন্যবাদ। এটি সম্পর্কে সচেতন ছিল না।

— জর্জি লেবার

12

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

function MyCtrl($scope, filterFilter) {
  $scope.results = {
    year:2013,
    subjects:[
      {title:'English',grade:'A'},
      {title:'Maths',grade:'A'},
      {title:'Science',grade:'B'},
      {title:'Geography',grade:'C'}
    ]
  };
  //create a filtered array of results 
  //with grade 'C' or subjects that have been failed
  $scope.failedSubjects = filterFilter($scope.results.subjects, {'grade':'C'});
}

তারপর আপনি উল্লেখ করতে পারেন failedSubjects একই ভাবে আপনি উল্লেখ হবে ফলাফল বস্তুর

আপনি এখানে https://docs.angularjs.org/guide/filter সম্পর্কে আরও পড়তে পারেন

যেহেতু এই উত্তর কৌনিকটি ডকুমেন্টেশন আপডেট করেছে তারা এখন ফিল্টারকে কল করার পরামর্শ দেয়

// update 
// eg: $filter('filter')(array, expression, comparator, anyPropertyKey);
// becomes
$scope.failedSubjects = $filter('filter')($scope.results.subjects, {'grade':'C'});

— কাইরন
সূত্র

ফিল্টার ফিল্টার কি? এটা কোন পরিষেবা বা নির্দেশনা? ফিল্টার ফিল্টার জন্য কোড কোথায়?

— মৌ

এটি একটি কৌণিক পরিষেবা। উপরের লিঙ্কটিতে প্রথম উদাহরণটি দেখুন। (স্ক্রিপ্টস.জেএস ফাইলটিতে)

— কাইরান

যদিও তারা ডকুমেন্টেশন ফিল্টার পরিবর্তন করেছে ফিল্টার এখনও কাজ করে ..

— কাইরান

4

আপনি করতে পারেন এছাড়াও ব্যবহার ফাংশন সঙ্গে $filter('filter'):

var foo = $filter('filter')($scope.results.subjects, function (item) {
  return item.grade !== 'A';
});

— Nelu
সূত্র

4

আপনি যদি ES6 ব্যবহার করে থাকেন তবে:

var sample = [1, 2, 3]

var result = sample.filter(elem => elem !== 2)

/* output */
[1, 3]

এছাড়াও নোটিশ ফিল্টারটি বিদ্যমান অ্যারে আপডেট করে না তা প্রতিবার নতুন ফিল্টার করা অ্যারে ফিরিয়ে দেবে।

— দিয়েগো ভেনসিও
সূত্র

0

একাধিক কলাম সহ HTML এ একই ফিল্টার প্রয়োগ করা হচ্ছে, উদাহরণস্বরূপ:

 variable = (array | filter : {Lookup1Id : subject.Lookup1Id, Lookup2Id : subject.Lookup2Id} : true)

— আমায় কুলকারনী
সূত্র