ফিল্টার করা এনজি-রিপিট ডেটার দৈর্ঘ্য কীভাবে প্রদর্শন করবেন

Question

আমার কাছে একটি ডেটা অ্যারে রয়েছে যা অনেকগুলি অবজেক্ট (জেএসএন ফর্ম্যাট) ধারণ করে। নিম্নলিখিতটি এই অ্যারের সামগ্রী হিসাবে ধরে নেওয়া যেতে পারে:

var data = [
  {
    "name": "Jim",
    "age" : 25
  },
  {
    "name": "Jerry",
    "age": 27
  }
];

এখন, আমি এই বিবরণগুলি এইভাবে প্রদর্শন করি:

<div ng-repeat="person in data | filter: query">
</div

এখানে, ক্যোয়ারী একটি ইনপুট ক্ষেত্রে মডেল করা হয়েছে যাতে ব্যবহারকারী প্রদর্শিত ডেটা সীমাবদ্ধ করতে পারে।

এখন, আমার আর একটি অবস্থান রয়েছে যেখানে আমি লোক / ব্যক্তির বর্তমান গণনা প্রদর্শন করছি, অর্থাৎ Showing {{data.length}} Persons

আমি যা করতে চাই তা হ'ল যখন ব্যবহারকারী কোনও ব্যক্তির সন্ধান করে এবং প্রদর্শিত ডেটা ক্যোয়ারির উপর ভিত্তি করে ফিল্টার করা হয়, ততক্ষণে Showing...personsলোকজনের মান বর্তমানে প্রদর্শিত হচ্ছে। তবে তা হচ্ছে না। এটি সর্বদা ফিল্টার করা তথ্যের চেয়ে মোট ব্যক্তিকে ডেটাতে প্রদর্শন করে - আমি কীভাবে ফিল্টার করা ডেটার গণনা করব?

Answer 1

কৌণিক 1.3+ এর জন্য ( @ টমকে ক্রেডিট)

একটি উপন্যাসের এক্সপ্রেশন ব্যবহার করুন (ডক্স: কৌণিক 1.3.0: এনজিপিপিট , আর্গুমেন্ট বিভাগে নীচে স্ক্রোল করুন ):

<div ng-repeat="person in data | filter:query as filtered">
</div>

1.3 এর আগে কৌণিকের জন্য

ফলাফলগুলি একটি নতুন ভেরিয়েবলের জন্য বরাদ্দ করুন (যেমন filtered) এবং এটি অ্যাক্সেস করুন:

<div ng-repeat="person in filtered = (data | filter: query)">
</div>

ফলাফলের সংখ্যা প্রদর্শন করুন:

Showing {{filtered.length}} Persons

একটি অনুরূপ উদাহরণ । ক্রেডিট পাভেল কোজলোস্কির কাছে

Comments

এটি সহজ উত্তর যা ফিল্টার প্রয়োগের পুনরাবৃত্তি করে না।

— agmin

@ বেন: হ্যাঁ আপনি এটি ব্যবহার করে নিয়ামকের ভিতরে এটি অ্যাক্সেস করতে পারেন $scope.filtered.length।

— Wumms

এটি আমার পক্ষে কাজ করে না। লগগুলি undefinedসম্ভবত এটি লগ করার সময়, ভেরিয়েবলটি এখনও সংজ্ঞায়িত হয়নি। ভেরিয়েবল সংজ্ঞায়িত হওয়ার পরে এবং ফিল্টারটি দর্শনে প্রয়োগ করার পরে কীভাবে নিয়ন্ত্রণকারী কোডটি চালানো হবে তা আমি নিশ্চিত করব ?

— বেন

@ বেন: আমার ধারণা, এটি বিষয়বস্তুতে চলেছে। আমি একটি কাস্টম ফিল্টার তৈরির কথা বিবেচনা করব যেমন জেএসফিডাল , তবে আপনি এটি $scope.$watch('filtered', function() { console.log('filtered:', $scope.filtered); });

— নিয়ামকের ভিতরেও

আমি সীমাবদ্ধতা যুক্ত করতে চাইলে 1.3+ সংস্করণটি কাজ করে না: person in data | filter:query as filtered | limitTo:5 । সুতরাং আমাকে পূর্ববর্তী 1.3 সংস্করণটি ব্যবহার করতে হয়েছিল:person in filtered = (data | filter: query) | limitTo: 5

— বেনজোভানিক

Answer 2

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

আপনার লোকের তালিকাটি dataপরিবর্তনশীল হিসাবে ধরে নেওয়া যায় এবং আপনি queryমডেল ব্যবহার করে লোকগুলিকে ফিল্টার করেন, নিম্নলিখিত কোডটি আপনার জন্য কাজ করবে:

<p>Number of visible people: {{(data|filter:query).length}}</p>
<p>Total number of people: {{data.length}}</p>

• {{data.length}} - জনগণের মোট সংখ্যা মুদ্রণ করে
• {{(data|filter:query).length}} - ফিল্টার করা লোকের সংখ্যা মুদ্রণ করে

মনে রাখবেন যে আপনি যদি কোনও পৃষ্ঠায় একবার ফিল্টারড ডেটা ব্যবহার করতে চান তবে এই সমাধানটি দুর্দান্ত কাজ করে । তবে আপনি যদি ফিল্টার করা ডেটা একাধিকবার ব্যবহার করেন যেমন আইটেমগুলি উপস্থাপন করতে এবং ফিল্টারযুক্ত তালিকার দৈর্ঘ্য দেখানোর জন্য, আমি AngularJS 1.3+ এর জন্য উপন্যাসের অভিব্যক্তি (নীচে বর্ণিত) বা 1.W3 এর আগে অ্যাঙ্গুলারজেএস সংস্করণের জন্য @Wumms দ্বারা প্রস্তাবিত সমাধানটি ব্যবহার করার পরামর্শ দেব ।

কৌণিক 1.3 এ নতুন বৈশিষ্ট্য

অ্যাঙ্গুলারজেএস নির্মাতারাও সেই সমস্যাটি লক্ষ্য করেছেন এবং সংস্করণ ১.৩ (বিটা ১)) এ তারা "উরফ" এক্সপ্রেশন যুক্ত করেছেন যা ফিল্টার প্রয়োগের পরে পুনরায় পুনর্বারের মধ্যবর্তী ফলাফলগুলি সংরক্ষণ করবে উদাহরণস্বরূপ

<div ng-repeat="person in data | filter:query as results">
    <!-- template ... -->
</div>

<p>Number of visible people: {{results.length}}</p>

ওরফে অভিব্যক্তি একাধিক ফিল্টার সঞ্চালনের বিষয়টি প্রতিরোধ করবে।

আমি আশা করি এটি সাহায্য করবে

Comments

এর অর্থ কি ফিল্টারটি দু'বার কার্যকর করা হবে?

— ফ্ল্যাশ

হ্যাঁ, এটি দুইবার কার্যকর করা হয়।

— নাথানচাহিল

আপনি এটি ব্যবহার করার সিদ্ধান্ত নেওয়ার আগে আপনি @ ওমস উত্তরটি পড়েছেন তা নিশ্চিত করুন (এবং আপনি যাবেন না) ...

— এপ্লেগ

কোন বিষয় নয়, আমি উত্তরটি দেখেছি যে আপনি নিজের মন্তব্য করার সময় উত্তরটিতে উলামের প্রকাশ সম্পর্কে অংশ ছিল না।

— অ্যাডাম গুডউইন

এই উত্তরটি বর্তমান শীর্ষ উত্তরের বিপরীতে একাধিক ফিল্টার এক্সপ্রেশন সমর্থন করে। ie){{(data|filter:query|filter:query2).length}}

— চেকদা

Answer 3

আপনার কাছে থাকলে সবচেয়ে সহজ উপায়

<div ng-repeat="person in data | filter: query"></div>

ফিল্টার করা ডেটার দৈর্ঘ্য

<div>{{ (data | filter: query).length }}</div>

Comments

এই এলিয়াসিং এবং প্রাক এনজি-১.৩ বিকল্পটি সমর্থিত নয় বলে কৌণিক ব্যবহারগুলি ডায়র-প্যাগিনেট নির্দেশিকা ব্যবহার করে এমন সবার পক্ষে এটি সবচেয়ে কার্যকর useful

— pcnate

এটি কি দ্বিগুণ ডেটা গণনা করবে?

— জেপে

Answer 4

এনজিআরপিট অ্যারেটির একটি অনুলিপি তৈরি করে যখন এটি কোনও ফিল্টার প্রয়োগ করে, সুতরাং আপনি কেবল ফিল্টারকারী উপাদানগুলিকে রেফারেন্স করতে উত্স অ্যারেটি ব্যবহার করতে পারবেন না।

আপনার ক্ষেত্রে, $filterপরিষেবাটি ব্যবহার করে আপনার নিয়ামকের অভ্যন্তরে ফিল্টার প্রয়োগ করা ভাল :

function MainCtrl( $scope, filterFilter ) {
  // ...

  $scope.filteredData = myNormalData;

  $scope.$watch( 'myInputModel', function ( val ) {
    $scope.filteredData = filterFilter( myNormalData, val );
  });

  // ...
}

এবং তারপরে আপনি filteredDataপরিবর্তে আপনার দৃষ্টিতে সম্পত্তিটি ব্যবহার করুন । এখানে একটি কার্যনির্বাহী Plunker: http://plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p= পূর্বরূপ

Comments

কি আমি বুঝলাম যে আমি ব্যবহার হয় {{filteredData.length}}পরিবর্তে data.length। আমি আরও বুঝতে পেরেছি যে myInputModelইনপুট ক্যোয়ারিতে ডেটা ফিল্টার করা মডেলটি হ'ল। valইনপুটটিতে টাইপ করা পাঠ্য হবে (মূলত ক্যোরি) তবে প্রতিবার আমি টাইপ করলে এটি পরিবর্তিত হয়। তবে filterFilterএখানে কী? আমি যুক্ত করতে পারি যে আমার নিজের নিজস্ব কাস্টম ফিল্টার তৈরি হয়েছে (যার মধ্যে আমি ফিল্টারিংয়ের জন্য বিবেচনা করা অবজেক্টের কোন কীটি নির্দিষ্ট করতে পারি)।

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

সেটা ঠিক. ng-repeat="person in filteredData"এটিকে দু'বার ফিল্টার করার কোনও ধারণা নেই বলে কেবল ব্যবহার করুন । সঙ্গে $filter: পরিষেবা, আপনি শুধু "ফিল্টার", যেমন সঙ্গে এটি suffixing দ্বারা কোনো নির্দিষ্ট ফিল্টার জন্য অনুরোধ করতে পারেন dateFilter, jsonFilter,, ইত্যাদি আপনি আপনার নিজস্ব ফিল্টার ব্যবহার করে থাকেন মাত্র ব্যবহার জেনেরিক পরিবর্তে এক filterFilter।

— জোশ ডেভিড মিলার

এক এনজি-রিপিটে একাধিক ফিল্টার প্রয়োগ করার বিষয়ে কী বলুন যে মানগুলি এবং একটি পাঠ্য ইনপুট ক্ষেত্র সহ আপনার দুটি ড্রপডাউন রয়েছে?

— কেমিকেশন

ফিল্টারটি কেবল একটি ফাংশন, সুতরাং আপনি কেবল প্রথম ফিল্টারটির আউটপুট দ্বিতীয় ফিল্টারটিতে সরিয়ে দেবেন।

— জোশ ডেভিড মিলার

Answer 5

অ্যাঙ্গুলারজেএস ১.৩ যেহেতু আপনি এলিয়াস ব্যবহার করতে পারেন:

item in items | filter:x as results

এবং কোথাও:

<span>Total {{results.length}} result(s).</span>

ডক্স থেকে :

আপনি একটি alচ্ছিক ওরফে এক্সপ্রেশনও সরবরাহ করতে পারেন যা ফিল্টারগুলি প্রয়োগ করার পরে পুনরায় পুনঃবর্তকের মধ্যবর্তী ফলাফলগুলি সংরক্ষণ করবে। সাধারণত কোনও ফিল্টার রিপিটারে সক্রিয় থাকাকালীন এটি একটি বিশেষ বার্তা রেন্ডার করতে ব্যবহৃত হয় তবে ফিল্টার করা ফলাফল সেটটি খালি থাকে।

উদাহরণস্বরূপ: আইটেম আইটেম | ফিল্টার: এক্স হিসাবে ফলাফল পুনরাবৃত্তি আইটেমগুলির খণ্ডগুলি ফলাফল হিসাবে সংরক্ষণ করবে তবে কেবল ফিল্টারটির মাধ্যমে আইটেমগুলি প্রক্রিয়া করা হবে।

Comments

আমি $scope.$watchএই বিকল্পযুক্ত ফলাফলটিতে আবেদন করতে অক্ষম । $broadcastএলিয়াসেড resultsভেরিয়েবলটি যুক্ত করার জন্য কোনও টিপস ?

— ডিবিরেড

Answer 6

আপনি ফিল্টারগুলি গোষ্ঠীকরণের মাধ্যমে একাধিক স্তরের ফলাফল সংরক্ষণ করতে পারেন তা লক্ষ করাও দরকারী

all items: {{items.length}}
filtered items: {{filteredItems.length}}
limited and filtered items: {{limitedAndFilteredItems.length}}
<div ng-repeat="item in limitedAndFilteredItems = (filteredItems = (items | filter:search) | limitTo:25)">...</div>

এখানে একটি ডেমো ফিজল

Answer 7

এখানে কাজ উদাহরণ হিসাবে Plunker দেখুন

  <body ng-controller="MainCtrl">
    <input ng-model="search" type="text">
    <br>
    Showing {{data.length}} Persons; <br>
    Filtered {{counted}}
    <ul>
      <li ng-repeat="person in data | filter:search">
        {{person.name}}
      </li>
    </ul>
  </body>

<script> 
var app = angular.module('angularjs-starter', [])

app.controller('MainCtrl', function($scope, $filter) {
  $scope.data = [
    {
      "name": "Jim", "age" : 21
    }, {
      "name": "Jerry", "age": 26
    }, {
      "name": "Alex",  "age" : 25
    }, {
      "name": "Max", "age": 22
    }
  ];

  $scope.counted = $scope.data.length; 
  $scope.$watch("search", function(query){
    $scope.counted = $filter("filter")($scope.data, query).length;
  });
});

Comments

এই পদ্ধতির সমস্যাটি হ'ল আপনি ফিল্টারটি দু'বার চালাচ্ছেন: একবার এনজিপিটায় এবং একবার নিয়ামক হিসাবে।

— জোশ ডেভিড মিলার

হ্যাঁ, আপনি ঠিক বলেছেন, আপনি নিজের উত্তরের উপর ভিত্তি করে নিজের কাজের উদাহরণটি পোস্ট করতে পারেন, আমি আরও কিছু ফিল্টার শিখতে চাই? ধন্যবাদ।

— ম্যাকসেম

অবশ্যই। এখানে কাজ করা প্লাঙ্কার: plnkr.co/edit/7c1l24rPkuKPOS5o2qtx?p= পূর্বরূপ দেখুন । আমি স্রেফ আপনার সম্পাদনা করেছি।

— জোশ ডেভিড মিলার

Answer 8

আপনি এটি 2 উপায়ে করতে পারেন । ইন টেমপ্লেট এবং কন্ট্রোলার । টেমপ্লেটে আপনি আপনার ফিল্টার করা অ্যারেটিকে অন্য ভেরিয়েবলে সেট করতে পারেন, তারপরে এটি আপনার পছন্দ মতো ব্যবহার করুন। কিভাবে করতে হবে এখানে আছে:

<ul>
  <li data-ng-repeat="user in usersList = (users | gender:filterGender)" data-ng-bind="user.name"></li>
</ul>
 ....
<span>{{ usersList.length | number }}</span>

আপনার যদি উদাহরণগুলির প্রয়োজন হয় তবে অ্যাংুলারজেগুলি ফিল্টার করা গণনা উদাহরণ / ডেমো দেখুন