AngularJS - ফিল্টার থেকে খালি ফলাফলের জন্য স্থানধারক

Question

আমি কোনও স্থান ধারক রাখতে চাই, যেমন <No result>যখন ফিল্টার ফলাফল খালি ফিরে আসে। কেউ দয়া করে সাহায্য করতে পারেন? আমি জানি না কোথায় শুরু করব ...

এইচটিএমএল :

<div ng-controller="Ctrl">
<h1>My Foo</h1>
<ul>
    <li ng-repeat="foo in foos">
        <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
    </li>
</ul>
<br />
<h1>My Bar</h1>
<ul>
    <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
</ul>

</div>

জেএস :

function Ctrl($scope) {

  $scope.foos = [{
    name: 'Foo 1'
  },{
    name: 'Foo 2'
  },{
    name: 'Foo 3'
  }];

  $scope.bars = [{
    name: 'Bar 1',
    foo: 'Foo 1'
  },{
    name: 'Bar 2',
    foo: 'Foo 2'
  }];

  $scope.setBarFilter = function(foo_name) {
    $scope.barFilter = {};
    $scope.barFilter.foo = foo_name;
  }
}

জেএসফিডাল : http://jsfiddle.net/adrn/PEumV/1/

ধন্যবাদ!

Comments

groups.google.com/d/msg/angular/wR06cN5oVBQ/decEAdq3n30J

— মার্ক রাজকক

আহ হাঁ, এনজি-শো সহ দুর্দান্ত কৌশল। অনেক ধন্যবাদ

— অ্যাড্রিয়ান গুণওয়ান

Answer 1

পদ্ধতির উপর একটি টুইঙ্ক যাতে কেবল একবার আপনাকে ফিল্টার নির্দিষ্ট করা দরকার:

  <li ng-repeat="bar in filteredBars = (bars | filter:barFilter)">{{bar.name}}</li>
</ul>
<p ng-hide="filteredBars.length">Nothing here!</p>

ফিডল

Comments

এটি কেবলমাত্র আপনার সমাধান একবারে আপনার ফিল্টারটি ঘোষণা করতে হবে তার মধ্যে এটি সর্বোত্তম সমাধান। +1

— টিম বি জেমস

সমস্যাটি হ'ল "এখানে কিছুই না!" অংশটি দেখানো এবং সত্যিই দ্রুত লুকানো হয়। যখন আপনি একটি এজ্যাক্স অনুরোধের সাথে ডেটা পাবেন তখন ফেরত তথ্য দেখানোর আগেই বিলম্ব হয় এবং সেই সময়ে আপনি "এখানে কিছুই না!" দেখতে পাবেন অংশ প্রদর্শিত এবং অদৃশ্য।

— টেমেগা

@ টেমেগা - আপনি বিভাগটিতে "এনজি-লুক" শ্রেণি যুক্ত করতে পারেন

— ব্রায়ান অলিভার

@ টেমেগা আপনি এনজি-শো = "

— ফিল্টারবার্স.লেন্থ

আমি ng-controller = "FooController কে $ ctrl" হিসাবে ব্যবহার করেছি এবং "বার ইন। Ctrl.filteredBars = (বার | ফিল্টার: বারফিল্টার)" করেছি তাই আমি এনজি-পুনরাবৃত্তির বাইরেও $ ctrl.filteredBars.length ব্যবহার করতে পারি। এই মহাকাব্য ইঙ্গিত জন্য ধন্যবাদ!

— xlttj

Answer 2

এনজি-শো ব্যবহারের কৌশলটি এখানে

এইচটিএমএল:

<div ng-controller="Ctrl">
<h1>My Foo</h1>
<ul>
    <li ng-repeat="foo in foos">
        <a href="#" ng-click="setBarFilter(foo.name)">{{foo.name}}</a>
    </li>
</ul>
<br />
<h1>My Bar</h1>
<ul>
    <li ng-repeat="bar in bars | filter:barFilter">{{bar.name}}</li>
</ul>
<p ng-show="(bars | filter:barFilter).length == 0">Nothing here!</p>

</div>

জেএসফিডাল: http://jsfiddle.net/adrn/PEumV/2/

Comments

তবে এক্ষেত্রে ফিল্টারটি দু'বার কার্যকর করা হয়, তা এড়ানোর কোনও উপায় আছে কি?

— যিশাইয়

এই সমাধানের জন্য ধন্যবাদ। আমি এখানে প্রদত্ত গ্রুপবাই ফিল্টারটি ব্যবহার করছি github.com/a8m/angular-filter তবে দুর্ভাগ্যক্রমে উপরে গৃহীত উত্তরগুলি কাজ করে না। এই পদ্ধতিটি ফিল্টারটি দু'বার কার্যকর করতে পারে তবে এটি নির্বিশেষে সমস্যার সমাধান করে।

— অ্যান্টনি

আমার ক্ষেত্রে এটি "== 0" ছাড়াই কাজ করে। <পি এনজি-শো = "(বার্স | ফিল্টার: বারফিল্টার) le দৈর্ঘ্য"> এখানে কিছুই নেই! </ p>

— অ্যালেসিও

Answer 3

এই সরকারী দস্তাবেজ থেকে গৃহীত হয়েছে যে তারা কীভাবে এটি করে:

ng-repeat="friend in friends | filter:q as results"

তারপরে ফলাফলগুলি অ্যারে হিসাবে ব্যবহার করুন

<li class="animate-repeat" ng-if="results.length == 0">
  <strong>No results found...</strong>
</li>

সম্পূর্ণ স্নিপেট:

<div ng-controller="repeatController">
I have {{friends.length}} friends. They are:
<input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />


<ul class="example-animate-container">
    <li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
      [{{$index + 1}}] {{friend.name}} who is {{friend.age}} years old.
    </li>
    <li class="animate-repeat" ng-if="results.length == 0">
      <strong>No results found...</strong>
    </li>
  </ul>
</div>

Comments

আমার সন্দেহ হয় যে এই প্রশ্নটি প্রথম জিজ্ঞাসা করার পরে জিনিসগুলি পরিবর্তিত হয়েছিল, তবে বর্তমানে অ্যাংুলারের ডক্স আপনাকে সমস্যার সমাধান করার পরামর্শ দিচ্ছে, আমি বলব এটি এই জায়গায় যাওয়ার সঠিক উপায় to

— জ্যাকেল 414

আমি আর কোনও উদাহরণ খুঁজে পেলাম না। এটি তাদের অ্যানিমেশন ডকুমেন্টেশনে, "লুকানো" এবং এটি সুযোগেই আমি লক্ষ্য করেছি যে একই দিনে আমার এটির প্রয়োজন ছিল বা আমি মনে করি না যে আমার মনে আছে।

— caiocpricci2