AngularJS - फ़िल्टर से खाली परिणाम के लिए प्लेसहोल्डर

Question

मैं एक स्थान धारक होना चाहता हूं, उदाहरण के लिए <No result>जब फ़िल्टर परिणाम खाली हो जाता है। किसी को भी मदद कर सकता है? मुझे यह भी पता नहीं है कि कहां से शुरू करना है ...

HTML :

<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;
  }
}

jsFiddle : http://jsfiddle.net/adrn/PEumV/1/

धन्यवाद!

Comments

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

— मार्क Rajcok

एनजी-शो के साथ आह हाँ अच्छा चाल। बहुत बहुत धन्यवाद

— एड्रियन गुनवान

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

— टिम बी जेम्स

समस्या यह है कि "यहाँ कुछ भी नहीं है!" भाग दिखाया गया है और वास्तव में जल्दी से छिपा हुआ है। जब आप एक अजाक्स अनुरोध के साथ डेटा प्राप्त करते हैं तो लौटाए गए डेटा दिखाए जाने से पहले देरी होती है और उस समय में आप "यहां" देख सकते हैं! भाग दिखाई देते हैं और गायब हो जाते हैं।

— तेमेगा

@ टेमेगा - आप डिव के लिए एक वर्ग "एनजी-हाईड" जोड़ सकते हैं

— ब्रायन ओलिवर

@ टमेगा आप एनजी-शो = "फ़िल्टर्डबर्स्.लगावनी === 0" का उपयोग कर सकते हैं

— 22

मैं एनजी-नियंत्रक = "$ ctrl के रूप में FooController" का उपयोग करता हूं और "$ ctrl.filteredBars = (बार | फ़िल्टर: बारफ़िल्टर)" में बार किया, इसलिए मैं एनजी-रिपीट के बाहर भी $ ctrl.filteredBars.length का उपयोग कर सकता हूं। इस महाकाव्य संकेत के लिए धन्यवाद!

— xlttj

Answer 2

यहाँ ng-show का उपयोग करके ट्रिक दी गई है

HTML:

<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>

jsFiddle: http://jsfiddle.net/adrn/PEumV/2/

Comments

लेकिन इस मामले में फ़िल्टर को दो बार निष्पादित किया जाता है, क्या इससे बचने का एक तरीका है?

— यशायाह १

इस समाधान के लिए धन्यवाद। मैं यहाँ दिए गए groupBy फ़िल्टर का उपयोग कर रहा हूँ github.com/a8m/angular-filter लेकिन दुर्भाग्य से ऊपर स्वीकार किए गए उत्तर काम नहीं करता है। यह विधि फ़िल्टर को दो बार निष्पादित कर सकती है लेकिन इसने समस्या को हल कर दिया है।

— एंथनी

मेरे मामले में यह "== 0" के बिना काम करता है। <p एनजी-शो = "(बार | फिल्टर: बारफिल्टर)। गति"> यहाँ कुछ भी नहीं! </ p>

— Alessio

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

मुझे संदेह है कि यह प्रश्न पहली बार पूछे जाने के बाद से बदल गया था, लेकिन यह देखते हुए कि वर्तमान में यह है कि कैसे कोणीय डॉक्स आपको समस्या को हल करने का सुझाव देते हैं, मैं कहूंगा कि यह इस बिंदु पर जाने का सही तरीका है।

— जैल ४१४

मुझे दूसरा उदाहरण नहीं मिला। यह "छिपा हुआ" है, उनके एनीमेशन प्रलेखन में और यह संयोग से था कि मैंने इसे उसी दिन देखा जिस दिन मुझे इसकी आवश्यकता थी या मुझे नहीं लगता कि मुझे याद होगा।

— caiocpricci2