AngularJS - কীভাবে এনজিআরপিট ফিল্টার করা ফলাফলের রেফারেন্স পাবেন

Question

আমি ফিল্টার সহ এনজি-রিপিট ডাইরেক্টিভটি ব্যবহার করছি:

ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4"

এবং আমি রেন্ডারড ফলাফলগুলি সূক্ষ্ম দেখতে পারি; এখন আমি আমার নিয়ামকের ফলাফলের উপর কিছু যুক্তি চালাতে চাই। প্রশ্নটি কীভাবে আমি ফলাফল আইটেমের রেফারেন্সটি ধরতে পারি?

হালনাগাদ:

---

কেবল পরিষ্কার করার জন্য: আমি একটি স্বয়ং সম্পূর্ণ তৈরি করার চেষ্টা করছি, আমার এই ইনপুটটি রয়েছে:

<input id="queryInput" ng-model="query" type="text" size="30" placeholder="Enter query">

এবং তারপরে ফিল্টার করা ফলাফল:

<ul>
   <li  ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4">{{item.name}}</li>
</ul>

এখন আমি ফলাফলটি নেভিগেট করতে এবং আইটেমগুলির মধ্যে একটি নির্বাচন করতে চাই।

Answer 1

আপডেট : এখানে যা ছিল তার চেয়ে এখানে সহজ উপায়।

 <input ng-model="query">
 <div ng-repeat="item in (filteredItems = (items | orderBy:'order_prop' | filter:query | limitTo:4))">
   {{item}}
 </div>

তারপরে $scope.filteredItemsঅ্যাক্সেসযোগ্য।

Comments

উত্তরের জন্য ধন্যবাদ, আমার আপডেট দেখুন। আপনি কীভাবে এটি বাস্তবায়ন করবেন তা নোট করুন যে আমি পুরো আইটেমের তালিকাটি

— এনআই-

দুর্দান্ত শীতল, তার জন্য ধন্যবাদ। আমি আশা করি এটি এনজি

— শ্লোমি শোয়ার্জ

এই পদ্ধতির সমস্যাটি হ'ল যদি আপনি নির্ধারিত সম্পত্তিটি দেখে থাকেন তবে আপনি স্প্যামিং-ডাইজেস্ট (প্রতিটি পুনরাবৃত্তির জন্য একটি) শেষ করবেন ... সম্ভবত এটি এড়ানোর কোনও উপায় আছে?

— জুহো ভেস্পসালিনেন

আমি যদি অনুসন্ধানের অবজেক্ট এবং কনসোল.লগটি filteredItemsদেখি তবে আমি সর্বদা ডেটা ফিল্টারটি পরে পাই। এটি কেবলমাত্র পরিবর্তিত ফিল্টারের ফলাফল নয়, তবে পূর্ববর্তী পরিবর্তনগুলির মধ্যে একটি। কোন ধারনা?

— সমস্যাগুলি

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

— ডালভারেজমার্টিনেজ 1

Answer 2

অ্যান্ডি জোসলিনের সমাধানের ফিল্টার সংস্করণটি এখানে।

আপডেট: নতুন পরিবর্তন। সংস্করণ 1.3.0-beta.19 অনুসারে ( এই প্রতিশ্রুতিবদ্ধ ) ফিল্টারগুলির একটি প্রসঙ্গ নেই এবং thisএটি বিশ্ব ব্যাপ্তিতে আবদ্ধ থাকবে। আপনি হয় প্রসঙ্গটি আর্গুমেন্ট হিসাবে পাস করতে পারেন বা এনজিআরপিট , 1.3.0-বিটা.17 + এ নতুন অ্যালিজিং সিনট্যাক্স ব্যবহার করতে পারেন ।

// pre 1.3.0-beta.19
yourModule.filter("as", function($parse) {
  return function(value, path) {
    return $parse(path).assign(this, value);
  };
});

// 1.3.0-beta.19+
yourModule.filter("as", function($parse) {
  return function(value, context, path) {
    return $parse(path).assign(context, value);
  };
});

তারপরে আপনার দৃষ্টিতে

<!-- pre 1.3.0-beta.19 -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.19+ -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 | as:this:'filteredItems'">
 {{item}}
</div>

<!-- 1.3.0-beta.17+ ngRepeat aliasing -->
<input ng-model="query">
<div ng-repeat="item in items | orderBy:'order_prop' | filter:query | limitTo:4 as filteredItems">
 {{item}}
</div>

যা আপনাকে অ্যাক্সেস দেয় $scope.filteredItems।

Comments

ধন্যবাদ! ফিল্টার কোড কীভাবে কাজ করে তা আপনি ব্যাখ্যা করতে পারেন? আমি পার্সের সাথে পরিচিত নই, এবং কৌনিক ডকস আমাকে কীভাবে আপনার ফিল্টারটি ঠিক কাজ করে তা ডিকোড করতে সহায়তা করেনি।

— ম্যাগনে

@ ম্যাগনে সমস্যা নেই! আপডেটটি পরীক্ষা করে দেখুন যদিও এটি আপনাকে কিছুটা ব্যথা এবং রাস্তায় ভুগতে পারে। আপনার প্রশ্নের উত্তর দিতে, সংক্ষেপে, $parseকৌণিক কারো নির্দেশ চলে না অভিব্যক্তি কম্পাইলার .. উদাহরণস্বরূপ, এটি STRING 'some.object.property' একটি মান বলেন পাথ একটি নির্দিষ্ট গ্রহণ করা এবং একটি ফাংশন যে আপনি হয় সেট করার অনুমতি দেয় ফিরে বা পাবেন প্রসঙ্গ। আমি বিশেষত এখানে filter স্কোপে ফিল্টার ফলাফল নির্ধারণ করতে এটি ব্যবহার করছি। আমি আশা করি এটি আপনার প্রশ্নের উত্তর দেয়।

— কেভিনজেমসু 8686

Answer 3

এই জাতীয় কিছু চেষ্টা করুন, এনজি-রিপিটের সমস্যাটি হ'ল এটি শিশুদের সুযোগ তৈরি করে কারণ আপনি অ্যাক্সেস করতে পারবেন না

filteritems

নিয়ামক থেকে

<li ng-repeat="doc in $parent.filteritems = (docs | filter:searchitems)" ></li>

Answer 4

হালনাগাদ:

1.3.0 এর পরেও। যদি আপনি এটিকে নিয়ামকের বা পিতামাতার স্কোপে রাখতে চান তবে আপনি সিনট্যাক্স হিসাবে এটি করতে পারবেন না । উদাহরণস্বরূপ যদি আমার কাছে নিম্নলিখিত কোড থাকে:

<div>{{labelResults}}</div>
<li ng-repeat="label in (labels | filter:query | as labelResults)">
</div>

উপরের কাজ করবে না । এর কাছাকাছি যাওয়ার উপায়টি $ পিতামাতাকে তাই ব্যবহার করছে :

<li ng-repeat="label in ($parent.labelResults = (labels | filter:query))">

Comments

এটি আপনার কাছে যদি সীমাবদ্ধতার জন্য ফিল্টার থাকে তবে তা লক্ষ করা ভাল। এটি প্রতিবিম্বিত হবে না $ প্যারেন্ট.লাবেল ফলাফল

— জ্যাক

আমি যদি console.log labelResultsসর্বদা ডেটা পরে পাই তবে একটি ফিল্টার। এটি কেবলমাত্র পরিবর্তিত ফিল্টারের ফলাফল নয়, তবে পূর্ববর্তী পরিবর্তনগুলির মধ্যে একটি। আপনার কি এই সমস্যা হয়নি?

— আন্না

Answer 5

আমি এন্ডির সমাধানের আরও ভাল সংস্করণ নিয়ে এসেছি। তার সমাধানে এনজি-রিপিট অ্যাসাইনমেন্টটি প্রকাশ করে এমন একটি ঘড়ি রাখে। প্রতিটি ডাইজেস্ট লুপ সেই অভিব্যক্তিটি মূল্যায়ন করে স্কোপ ভেরিয়েবলকে ফলাফল নির্ধারণ করে।

এই সমাধানটি সহকারে সমস্যাটি হ'ল আপনি যদি কোনও সন্তানের সুযোগে থাকেন তবে আপনি সম্ভবত নিয়োগের সমস্যাগুলিতে চলে যেতে পারেন। এনজি-মডেলটিতে আপনার বিন্দুর কেন একই কারণ রয়েছে ।

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

একটি সহজ সমাধান হ'ল আপনার নিয়ামককে এমন একটি ক্রিয়াকলাপের জন্য একটি ঘড়ি স্থাপন করা যা এই নিয়োগটি করে:

$scope.$watch(function () {
    $scope.filteredItems = $scope.$eval("items | orderBy:'order_prop' | filter:query | limitTo:4");
});

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

ভিউতে আপনি কেবল ফিল্টারড তালিকাটি সরাসরি ব্যবহার করবেন:

<ul>
    <li  ng-repeat="item in filteredItems">{{item.name}}</li>
</ul>

এখানে একটি বেহালার জায়গা যেখানে এটি আরও জটিল দৃশ্যে দেখানো হয়েছে।

Comments

সুপার পরিষ্কার এবং কাঠামো দূষিত করে না, দুর্দান্ত!

— কুজিন

এই সমাধানটি আমার পক্ষে নিখুঁত ... আমি এনজি রিপিটের পরিবর্তে আয়নিক সংগ্রহের পুনরাবৃত্তিটি ব্যবহার করছিলাম ... তবে কেন গৃহীত উত্তরগুলি আমার পক্ষে কাজ করে নি

— লক্ষ্যা

Answer 6

এই উত্তরটি দেখুন:

এনজি-রিপিটে আইটেম নির্বাচন এবং অ্যাক্সেস করা

<li ng-repeat="item in ..." ng-click="select_item(item)">