AngularJS এনজি-রিপিট্ট হ্যান্ডেল খালি তালিকার কেস

Question

আমি ভেবেছিলাম এটি খুব সাধারণ জিনিস হবে তবে এঙ্গুলারজেএস-এ কীভাবে এটি পরিচালনা করতে পেলাম তা খুঁজে পেলাম না। আসুন বলি আমার কাছে ইভেন্টগুলির একটি তালিকা আছে এবং এগুলারজেজেএসের সাথে সেগুলি আউটপুট করতে চাই, তবে এটি বেশ সহজ:

<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

— রাজকক

Answer 1

আপনি এনজিও ব্যবহার করতে পারেন ।

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

উদাহরণ দেখুন ।

অথবা আপনি এনজিহাইড ব্যবহার করতে পারেন

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

উদাহরণ দেখুন ।

বস্তুর জন্য আপনি অবজেক্ট.কিগুলি পরীক্ষা করতে পারেন ।

Comments

প্রকৃতপক্ষে @ আর্টেমএন্ড্রিভ। যখন "ইভেন্টগুলি" একটি খালি অ্যারে হয়, অ্যারেটি খালি থাকলেও এটি সত্য হয়

— রব জুউরলিংক

আমি মনে করি অবজেক্ট.কিজ: jsfiddle.net/J9b5z নিয়ে কোনও সমস্যা আছে , আপনি কীভাবে এটি পরিচালনা করবেন?

— দানি

এনএইচ-শো আমার কেস আইডি করেছে তবে আমি যখন ফিল্টার রাখি তখন কিছুই আপডেট হয় না। এছাড়াও বস্তুটি প্রথম লোডে উপস্থিত হয় এবং পৃষ্ঠা লোডে পুনরাবৃত্তি প্রক্রিয়াটি শেষ হয়ে গেলে অদৃশ্য হয়ে যায়।

— ডিভিডিএমএন

@ ডানি পরীক্ষা করে এমন আপনার নিয়ামকের সাথে একটি ক্রিয়াকলাপ যুক্ত করার চেষ্টা করুন। তারপরে আপনি কেবল নির্দেশটি দিয়ে যেতে পারেন 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

খুব দরকারী. টাইপ করুন যদিও "ফিল্টারযুক্ত ফ্রেমগুলি" দিয়ে।

— রবিশি

খুব সুন্দর! এনজি-রিপিটের ভিতরে প্রকাশটি যদিও অদ্ভুত দেখাচ্ছে। কোন সুযোগ আপনি এটি ব্যাখ্যা করতে পারে? ধন্যবাদ !!

— এমকে সাফি

@ এম কে সাফি, এটি ডাকা স্কোপে নতুন ভেরিয়েবল তৈরি করছে filteredItemsএবং এর মান সেট করছে (items | filter:keyword)- অন্য কথায়, অ্যারেটি ফিল্টার দ্বারা ফিরিয়ে দিয়েছে

— আলেক্সফক্সগিল

হ্যাঁ! নিনজা প্লাস পয়েন্ট! এটি দুটি জটিল জটিল ফিল্টার মূল্যায়ন থেকে কৌনিককে বাঁচায়!

— মার্কমারিজনিসেন

এছাড়াও, একাধিক ফিল্টার সহ এর চারপাশে কিছু সীমাবদ্ধতা রয়েছে বলে মনে হচ্ছে, "face in filteredFaces = faces|filter:{deleted: true} | orderBy:'text'তবে আমি সবার সাথে একমত, এটি একটি দুর্দান্ত কৌশল।

— ফিটার ম্যান

Answer 3

তালিকাটি খালি থাকলে আপনি যদি কেবলমাত্র ডিওএম ui-if থেকে অপসারণ করতে চান তবে আপনি কৌণিক-ইউআই নির্দেশিকাটি পরীক্ষা করে দেখতে চাইতে পারেন ul:

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

Comments

ধন্যবাদ। এটি লুকিয়ে রাখার চেয়ে আরও পরিষ্কার মনে হচ্ছে।

— প্রিনজর্ন

@ মর্তিমার: তাহলে এক্ষেত্রে আমাদের কি কৌনিক-ইউআই দরকার?

— শিব্বির আহমেদ

আপনি ng-hideকৌণিক-ইউআই ছাড়াই ব্যবহার করতে পারেন তবে এটি নোডটি কেবল আড়াল করবে, এটি ডিওএম গাছ থেকে সরিয়ে ফেলবে না। কৌণিক-ইউআইয়ের ui-ifনির্দেশের সাহায্যে এটি ডিওএম নোডটি সরিয়ে ফেলবে। সুতরাং, আপনাকে কমপক্ষে ui-ifকৌণিক-ইউআই কোড থেকে নিজের কোডে নির্দেশিকা যুক্ত করতে হবে ।

— মর্তিমার

নতুন কৌণিক ng-ifঅন্তর্ভুক্ত করা হয়েছে!

— মার্কমারিজনিসেন

নোট যে ng-ifএকটি নতুন সুযোগ তৈরি করছে, যেখানে ng-hideনেই। এটি অপ্রত্যাশিত আচরণের কারণ হতে পারে।

— আর্নল্ড ড্যানিয়েলস

Answer 4

Angularjs এর নতুন সংস্করণগুলির সাথে এই প্রশ্নের সঠিক উত্তরটি ব্যবহার করা উচিত 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= পূর্বরূপ

টিপ: আপনি একটি লোডিং পাঠ্য বা স্পিনারও দেখাতে পারেন:

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

এটি @ কনরাদ 'কোটো' মালাউস্কির মতো তবে মনে রাখা কিছুটা সহজ।

কৌণিক 1.4 দিয়ে পরীক্ষিত

Comments

আপনার অর্থng-if='!filteredItems.length'

— অরুনেট

আপনি একাধিক ফিল্টার দিয়ে এটি কীভাবে করেন?

— জর্দাশ

@ জর্দাশ কেবল তাদের পাইপ দিন item in items | filter: ... | filter: ...

— বার্নার্ড

একটি সুন্দর, আরও পরিশোধন হয়<li ng-if="!filteredItems.length">

— Matty জে

এটা অসাধারণ. আমি এর আগে অনেক বেশি নোংরা পদ্ধতি ব্যবহার করেছিitem in (filteredItems = (items | filter: someFilter))

— ফিরজ

Answer 6

জাভাস্ক্রিপ্ট / অ্যাঙ্গুলারজেএস এর পরিবর্তে সিএসএস ব্যবহার করে এখানে একটি পৃথক পদ্ধতি রয়েছে।

সিএসএস:

.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 = "ফিল্টারড আইটেমগুলিতে আইটেম"> ইত্যাদি,

Comments

প্রশ্ন বলছে "আমি তালিকার যেখানে রয়েছে সেখানে একটি বার্তা বাক্স রাখতে চাই"। আমি যুক্তিটিকে স্টাইলশীটে আলাদা করা অসুবিধাজনক বলেও মনে করি। বজায় রাখা এবং সমস্যা জিজ্ঞাসা করা কঠিন।

— প্রিনজর্ন

@ প্রিনজর্ন, আমি সিএসএস ব্যবহার করা একটি সুবিধা বলে মনে করি কারণ যুক্তিটি খুব সহজ এবং বজায় রাখা সহজ, অন্যান্য তালিকাতে সিএসএস পুনরায় ব্যবহারযোগ্য এবং এটি জাভাস্ক্রিপ্টের উপর নির্ভর করে না। অতিরিক্ত শ্রোতা বা প্রহরীদের প্রয়োজন নেই। বার্তাটি বাক্সের মতো দেখতে স্টাইল করা যেতে পারে, আমি উত্তরটি সহজ রাখি নি।

— মরিয়ম সালজার

কয়েক মাস দেরিতে মঞ্জুর করা হয়েছে, তবে আমি মরিয়মের সাথে একমত, আমি মনে করি এই উত্তরটি প্রতিভাধর।

— জন

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

আপনি এনজি-ইফ ব্যবহার করতে পারেন কারণ এটি এইচটিএমএল পৃষ্ঠায় রেন্ডার করা হয়নি এবং আপনি আপনার এইচটিএমএল ট্যাগটি পরিদর্শন করতে দেখতে পারবেন না ...

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