AngularJS एनजी-रिपीट हैंडल खाली सूची मामले

Question

मैंने सोचा था कि यह एक बहुत ही सामान्य बात होगी, लेकिन मुझे यह नहीं मिला कि मैं इसे AngularJS में कैसे संभाल सकता हूं। मान लीजिए कि मेरे पास घटनाओं की एक सूची है और उन्हें AngularJS के साथ आउटपुट करना चाहते हैं, तो यह बहुत आसान है:

<ul>
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

लेकिन सूची खाली होने पर मैं मामले को कैसे संभाल सकता हूं? मैं उस जगह पर एक संदेश बॉक्स रखना चाहता हूं जहां सूची "कोई घटना नहीं" या इसी तरह की चीज के साथ हो। केवल एक चीज जो करीब आएगी वह ng-switchहै events.length(मैं कैसे जांच करूं कि क्या खाली है जब एक वस्तु और एक सरणी नहीं?), लेकिन क्या वास्तव में मेरे पास एकमात्र विकल्प है?

Comments

@ आर्टेम का उत्तर अच्छा है (+1)। : यहाँ एक गूगल समूह चर्चा संदर्भ / तुलना के लिए, एक फिल्टर का उपयोग करता है है groups.google.com/d/topic/angular/wR06cN5oVBQ/discussion

— मार्क Rajcok

Answer 1

आप ngShow का उपयोग कर सकते हैं ।

<li ng-show="!events.length">No events</li>

उदाहरण देखें ।

या आप एनगाइड का उपयोग कर सकते हैं

<li ng-hide="events.length">No events</li>

उदाहरण देखें ।

ऑब्जेक्ट के लिए आप Object.keys का परीक्षण कर सकते हैं ।

Comments

वास्तव में @ArtemAndreev जब "ईवेंट" एक खाली सरणी है, तो यह खाली होने के बावजूद सही है

— रोब जुरालिंक

मुझे लगता है कि Object.keys: jsfiddle.net/J9b5z के साथ एक समस्या है , आप इसे कैसे संभालेंगे?

— दानी

nh-show ने मेरे मामले को आईडी के रूप में काम किया, लेकिन जब मैंने एक फिल्टर लगाया और वापस नहीं आया तो यह राज्य को अपडेट नहीं करता। साथ ही ऑब्जेक्ट पहले लोड पर दिखाई देता है और जब पेज लोड पर किया गया रिपीट प्रोसेस गायब हो जाता है।

— डीवीएमएन

@ दानी अपने नियंत्रक के लिए एक फ़ंक्शन जोड़ने का प्रयास करता है जो परीक्षण करता है। इसके बाद आप निर्देश को लागू कर सकते हैं ng-hide="hasEvents()"।

— श्री एस।

हाँ धन्यवाद। हालांकि, मुझे उम्मीद है कि नियंत्रक को "प्रदूषणकारी" किए बिना एक और अधिक सुरुचिपूर्ण तरीका होगा।

— दानी

Answer 2

और यदि आप इसे फ़िल्टर की गई सूची के साथ यहाँ उपयोग करना चाहते हैं तो एक साफ-सुथरी चाल है:

<ul>
    <li ng-repeat="item in filteredItems  = (items | filter:keyword)">
        ...
    </li>
</ul>
<div ng-hide="filteredItems.length">No items found</div>

Comments

बहुत उपयोगी। हालांकि "फ़िल्टर्ड फ़्रेग्मेंट्स" के साथ टाइपो।

— रवीश

मिठाई! एनजी-रिपीट के अंदर की अभिव्यक्ति हालांकि अजीब लगती है। कोई भी मौका आप इसे समझा सकते हैं? धन्यवाद!!

— एमके सफी

@MKSafi, यह बुलाया स्कोप पर एक नया वैरिएबल बना रहा है filteredItemsऔर इसके मूल्य को (items | filter:keyword)दूसरे शब्दों में सेट करता है, फिल्टर द्वारा लौटाए गए

— ऐरे

हाँ! निंजा प्लस अंक! यह कोणीय को दो बार एक जटिल फिल्टर के मूल्यांकन से बचाता है!

— markmarijnissen

इसके अलावा, कई फ़िल्टरों के साथ इसके आस-पास कुछ सीमाएँ प्रतीत होती हैं, जैसे कि "face in filteredFaces = faces|filter:{deleted: true} | orderBy:'text'लेकिन मैं सभी के साथ सहमत हूँ, यह एक शानदार चाल है।

— फिटर मैन

Answer 3

यदि आप सूची खाली होने पर डोम से हटाना चाहते हैं तो आप कोणीय-यूआई निर्देश की जांच कर सकते हैं :ui-iful

<ul ui-if="!!events.length">
    <li ng-repeat="event in events">{{event.title}}</li>
</ul>

Comments

धन्यवाद। इसे छुपाने की तुलना में क्लीनर लगता है।

— प्रिंज़ोर्न

@ मॉर्टिमर: तो क्या इस मामले में हमें कोणीय-उई की आवश्यकता है?

— शिबिर अहमद

आप ng-hideकोणीय-यूआई के बिना उपयोग कर सकते हैं , लेकिन यह सिर्फ नोड को छिपाएगा, इसे डोम ट्री से नहीं हटाएगा। कोणीय-यूआई के ui-ifनिर्देश के साथ, यह DOM नोड को हटा देगा। तो, आपको कम से कम ui-ifनिर्देश को कोणीय-यूआई कोड से अपने कोड में जोड़ना होगा ।

— मोर्टिमर

नवीनतम कोणीय ng-ifशामिल है!

— मार्मारजनिसेन

ध्यान दें कि ng-ifएक नया क्षेत्र बना रहा है, जहां ng-hideनहीं है। इससे अप्रत्याशित व्यवहार हो सकता है।

— अर्नोल्ड डेनियल 14

Answer 4

कोणीयज के नए संस्करणों के साथ इस प्रश्न का सही उत्तर उपयोग करना है ng-if:

<ul>
  <li ng-if="list.length === 0">( No items in this list yet! )</li>
  <li ng-repeat="item in list">{{ item }}</li>
</ul>

जब सूची को डाउनलोड करना हो तो यह समाधान नहीं होगा क्योंकि सूची को परिभाषित करना होगा और संदेश प्रदर्शित करने के लिए 0 की लंबाई के साथ।

इसे उपयोग में दिखाने के लिए एक प्लंकर है: http://plnkr.co/edit/in7ha1wTlpuVgamiOblS?p=preview

सुझाव: आप एक लोडिंग टेक्स्ट या स्पिनर भी दिखा सकते हैं:

  <li ng-if="!list">( Loading... )</li>

Answer 5

<ul>
    <li ng-repeat="item in items | filter:keyword as filteredItems">
        ...
    </li>
    <li ng-if="filteredItems.length===0">
        No items found
    </li>
</ul>

यह @Konrad 'ktoso' Malawski के समान है लेकिन याद रखना थोड़ा आसान है।

एंगुलर 1.4 के साथ परीक्षण किया गया

Comments

तुम्हारा मतलब हैng-if='!filteredItems.length'

— abrunet

आप इसे कई फिल्टरों के साथ कैसे करते हैं?

— जार्डश

@ जोर्डश बस उन्हें पाइप करते रहें item in items | filter: ... | filter: ...

— बर्नार्ड

एक अच्छा, आगे शोधन है<li ng-if="!filteredItems.length">

— मैटी जे

यह भी खूब रही। मैं पहले बहुत ही गंदे तरीके का उपयोग कर रहा हूं जैसेitem in (filteredItems = (items | filter: someFilter))

— फिरोज

Answer 6

यहां JavaScript / AngularJS के बजाय CSS का उपयोग करने का एक अलग तरीका है।

सीएसएस:

.emptymsg {
  display: list-item;
}

li + .emptymsg {
  display: none;
}

मार्कअप:

<ul>
    <li ng-repeat="item in filteredItems"> ... </li>
    <li class="emptymsg">No items found</li>
</ul>

यदि सूची खाली है, तो <li ng-repeat = "filteredItems में आइटम">, आदि को बाहर टिप्पणी मिलेगी और एक ली तत्व के बजाय एक टिप्पणी बन जाएगी।

Comments

प्रश्न कहता है, "मैं उस जगह पर एक संदेश बॉक्स रखना चाहता हूं जहां सूची है"। मुझे भी लगता है कि तर्क को स्टाइलशीट में अलग करना नुकसानदेह है। मुश्किल को बनाए रखने और पूछने के लिए।

— प्रिंज़ोर्न

@Prinzhorn, मुझे लगता है कि CSS का उपयोग करना एक फायदा है क्योंकि तर्क बहुत सरल और बनाए रखने में आसान है, सीएसएस अन्य सूचियों के लिए पुन: प्रयोज्य है, और यह जावास्क्रिप्ट पर भरोसा नहीं करता है। कोई अतिरिक्त श्रोता या देखने वाले की आवश्यकता नहीं है। संदेश को एक बॉक्स की तरह देखने के लिए स्टाइल किया जा सकता है, मैंने सिर्फ उत्तर को सरल रखने के लिए नहीं किया।

— मिरियम सैल्जर

कुछ महीने देर से, दी गई, लेकिन मैं मरियम से सहमत हूं, मुझे लगता है कि यह जवाब प्रतिभाशाली है।

— जॉन कॉम्बे

Answer 7

आप इस एनजी-स्विच का उपयोग कर सकते हैं:

<div ng-app ng-controller="friendsCtrl">
  <label>Search: </label><input ng-model="searchText" type="text">
  <div ng-init="filtered = (friends | filter:searchText)">
  <h3>'Found '{{(friends | filter:searchText).length}} friends</h3>
  <div ng-switch="(friends | filter:searchText).length">
    <span class="ng-empty" ng-switch-when="0">No friends</span>
    <table ng-switch-default>
      <thead>  
        <tr>
          <th>Name</th>
          <th>Phone</th>
        </tr>
      </thead>
      <tbody>
      <tr ng-repeat="friend in friends | filter:searchText">
        <td>{{friend.name}}</td>
        <td>{{friend.phone}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 8

आप asकिसी ng-repeatतत्व के तहत संग्रह का उल्लेख करने के लिए कीवर्ड का उपयोग कर सकते हैं :

<table>
    <tr ng-repeat="task in tasks | filter:category | filter:query as res">
        <td>{{task.id}}</td>
        <td>{{task.description}}</td>
    </tr>
    <tr ng-if="res.length === 0">
        <td colspan="2">no results</td>
    </tr>
</table>

Answer 9

मैं आमतौर पर एनजी-शो का उपयोग करता हूं

<li ng-show="variable.length"></li>

जहाँ चर आप उदाहरण के लिए परिभाषित करते हैं

<div class="list-group-item" ng-repeat="product in store.products">
   <li ng-show="product.length">show something</li>
</div>

Answer 10

आप एनजी का उपयोग कर सकते हैं-यदि यह html पृष्ठ में प्रस्तुत नहीं किया गया है और आप निरीक्षण में अपना HTML टैग नहीं देख रहे हैं ...

<ul ng-repeat="item in items" ng-if="items.length > 0">
    <li>{{item}}<li>
</ul>
<div class="alert alert-info">there is no items!</div>