এনজিআরপিট ব্যবহার করার সময় প্রদর্শিত ফলাফলের সীমাবদ্ধ করা

148

আমি অ্যাঙ্গুলারজেএস টিউটোরিয়ালগুলি বোঝা শক্ত মনে করি; এইটি ফোন প্রদর্শন করে এমন একটি অ্যাপ তৈরির মাধ্যমে আমাকে হাঁটছে walking আমি 5 ধাপে আছি এবং আমি একটি পরীক্ষার হিসাবে ভেবেছিলাম ব্যবহারকারীদের কতটি তারা প্রদর্শিত হতে চান তা নির্দিষ্ট করার অনুমতি দেওয়ার চেষ্টা করব। ভিউটি দেখতে এমন দেখাচ্ছে:

<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
    <div class="row-fluid">
      <div class="span2">
        <!--Sidebar content-->

        Search: <input ng-model="query">
        How Many: <input ng-model="quantity">
        Sort by:
        <select ng-model="orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>

      </div>
      <div class="span10">
        <!--Body content-->

        <ul class="phones">
          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
            {{phone.name}}
            <p>{{phone.snippet}}</p>
          </li>
        </ul>

      </div>
    </div>
  </div>
</body>

আমি এই লাইনটি যুক্ত করেছি যেখানে ব্যবহারকারীরা তাদের প্রদর্শিত ফলাফলের জন্য কতগুলি ফলাফল প্রবেশ করতে পারবেন:

How Many: <input ng-model="quantity">

এখানে আমার নিয়ামক:

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 'quantity');
  });

  $scope.orderProp = 'age';
  $scope.quantity = 5;
}

গুরুত্বপূর্ণ লাইনটি হ'ল:

$scope.phones = data.splice(0, 'quantity');

কতগুলি ফোন প্রদর্শিত হবে তা উপস্থাপন করার জন্য আমি একটি সংখ্যায় হার্ড-কোড করতে পারি। আমি যদি রাখি তবে 55 টি প্রদর্শিত হবে। আমি যা করতে চাই তা হ'ল ভিউ থেকে সেই ইনপুটটিতে নম্বরটি পড়তে হবে এবং data.spliceলাইনে রাখবে put আমি উদ্ধৃতি সহ এবং ছাড়া চেষ্টা করেছি এবং কোনটিই কাজ করে না। আমি এটা কিভাবে করবো?

— ক্যাপ্টেন স্ট্যাক
সূত্র

345

খানিকটা আরও "কৌণিক উপায়" হ'ল সরু limitToফিল্টারটি ব্যবহার করা হবে , স্থানীয়ভাবে কৌণিক দ্বারা সরবরাহিত:

<ul class="phones">
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp | limitTo:quantity">
    {{phone.name}}
    <p>{{phone.snippet}}</p>
  </li>
</ul>

app.controller('PhoneListCtrl', function($scope, $http) {
    $http.get('phones.json').then(
      function(phones){
        $scope.phones = phones.data;
      }
    );
    $scope.orderProp = 'age';
    $scope.quantity = 5;
  }
);

PLUNKER

— Stewie
সূত্র

54

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

— স্টেফান.কম

3

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

— টিম বাথ

কী filter:query?

— বিগপনি

ওপি-র প্রশ্ন অনুযায়ী @ ডিএফএমএক্স, queryএসেছেSearch: <input ng-model="query">

— জাস্টোপি

45

পার্টিতে কিছুটা দেরি হলেও আমার পক্ষে এটি কাজ করেছিল worked আশা করি অন্য কেউ এটির কাজে লাগবে।

<div ng-repeat="video in videos" ng-if="$index < 3">
    ...
</div>

— couzzi
সূত্র

2

আমি সন্দেহ করি এটি যদি বড় অ্যারে হয় তবে সীমাবদ্ধতা-ফিল্টার ব্যবহার করার চেয়ে কম দক্ষ হবে, কারণ সম্ভবত প্রতিটি আইটেমটি মূল্যায়ন করতে হবে

— rom99

3

আমার এমন একটি দৃশ্য ছিল যেখানে আমি আরও অনেক বেশি ব্যাকিং অ্যারে থেকে 6 টি আইটেম প্রদর্শন করতে চেয়েছিলাম। ব্যবহার করা ng-if="$index < 6"আমাকে যখন সমগ্র অ্যারের অনুসন্ধানযোগ্য পালন শুধুমাত্র প্রথম 6 দেখানোর জন্য মঞ্জুরিপ্রাপ্ত (আমি একটি ফিল্টার একটি অনুসন্ধান ক্ষেত্র সঙ্গে মিলিত থাকে)।

— জেরোইন ভেনেভিল

এটি সীমাবদ্ধ নয়, এটি যদি আরও বেশি গণনা করা হয় তবে এটি সম্পূর্ণ ফলাফলটি গোপন করে

— fdrv

@ জেক-এফডিআরভি - না, ng-ifএই ক্ষেত্রে, রিপিটারের ডিওএম উপাদানটির $indexতুলনায় যার থেকে বড় হবে তা সরবরাহ করবে না 3। যদি $indexরিপিটারটিতে থাকে 0, 1, or 2তবে শর্তটি হয় trueএবং DOM নোড তৈরি হয়। এই ধারণা ng-ifথেকে পৃথক হয় ng-hideযে উপাদানগুলি ডিওমে যুক্ত হয় না ।

— কুজ্জি

2

আপনার সমস্ত তথ্য প্রাথমিকভাবে সঞ্চয় করুন

function PhoneListCtrl($scope, $http) {
  $http.get('phones/phones.json').success(function(data) {
    $scope.phones = data.splice(0, 5);
    $scope.allPhones = data;
  });

  $scope.orderProp = 'age';
  $scope.howMany = 5;
  //then here watch the howMany variable on the scope and update the phones array accordingly
  $scope.$watch("howMany", function(newValue, oldValue){
    $scope.phones = $scope.allPhones.splice(0,newValue)
  });
}

সম্পাদনা ঘটনাক্রমে নিয়ামক এটা ভিতরে হওয়া উচিত ছিল বাহিরে ঘড়ি করা হয়েছিল।

— shaunhusain
সূত্র

2

এইচটিএমএলে আপনার ফিল্টারটি সীমাবদ্ধ করার জন্য এখানে অন্য এক উপায় রয়েছে, উদাহরণস্বরূপ, আমি সীমা ব্যবহার করব তার চেয়ে আমি 3 টি তালিকা প্রদর্শন করতে চাই তাই: 3

  <li ng-repeat="phone in phones | limitTo:3">
    <p>Phone Name: {{phone.name}}</p>
  </li>

— Rizo
সূত্র

1

আপনার ক্ষেত্রে অবজেক্ট বা মাল্টি-ডাইমেনশনাল অ্যারে থাকলে এটি আমার ক্ষেত্রে আরও ভাল কাজ করে। এটি কেবল প্রথম আইটেম দেখায়, অন্যান্য কেবল লুপে উপেক্ষা করা হবে।

.filter('limitItems', function () {
  return function (items) {
    var result = {}, i = 1;
    angular.forEach(items, function(value, key) {
      if (i < 5) {
        result[key] = value;
      }
      i = i + 1;
    });
    return result;
  };
});

আপনি যা চান তার উপর 5 পরিবর্তন করুন।

— fdrv
সূত্র

0

এনজি-রিপিটে সীমিত সংখ্যক ফলাফল প্রদর্শন করতে সীমাবদ্ধতা ফিল্টার ব্যবহার করুন।

<ul class="phones">
      <li ng-repeat="phone in phones | limitTo:5">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
</ul>

— রাজকিরণ শেঠি
সূত্র

-3

এটি অর্জনের জন্য আরেকটি (এবং আমি আরও ভাল মনে করি) উপায়টি হ'ল ডেটাটিকে প্রকৃতপক্ষে আটকানো। সীমাবদ্ধতা ঠিক আছে তবে আপনি যদি 10 এ সীমাবদ্ধ রাখেন যখন আপনার অ্যারেটিতে হাজার হাজার রয়েছে?

আমার পরিষেবাটি কল করার সময় আমি কেবল এটি করেছি:

TaskService.getTasks(function(data){
    $scope.tasks = data.slice(0,10);
});

এটি দর্শনে যা পাঠানো হয় তা সীমাবদ্ধ করে, তাই সামনের দিকে এগুলি করার চেয়ে পারফরম্যান্সের জন্য আরও ভাল হওয়া উচিত।

— ম্যাট স্যান্ডার্স
সূত্র

সীমাবদ্ধতা প্রয়োগের জন্য অ্যারে.স্লাইস () ব্যবহার করা যাই হোক না কেন, অ্যারের আকারের যে কোনও পার্থক্যের পারফরম্যান্সে এটি করার মত পার্থক্য থাকা উচিত। github.com/angular/angular.js/blob/master/src/ng/filter/…

— rom99

তবে সীমাবদ্ধতা আসলে দেখার জন্য প্রেরিত ডেটা সীমাবদ্ধ করে না, যদিও এটি এভাবে করে। আমি কনসোল.লগ () ব্যবহার করে এটি পরীক্ষা করেছি।

— ম্যাট স্যান্ডার্স

1

হ্যাঁ, আপনি যা করছেন তা ভিউতে একটি নতুন অ্যারে উন্মুক্ত করছে (আমি সত্যিই এটিকে কোথাও কিছু 'প্রেরণ' বলে ভাবব না)। আপনি যদি কেবলমাত্র ডেটাতে প্রথম 10 আইটেমগুলিতে আগ্রহী হন এবং ডেটা অন্য কোথাও উল্লেখ করা হয় না, এটি এভাবে করা মেমরির পদচিহ্ন হ্রাস করতে পারে (ধরে নিলে ডেটা আবর্জনা সংগ্রহ করা যেতে পারে)। তবে আপনি যদি এখনও dataচারপাশে একটি রেফারেন্স রাখেন তবে এটি সীমাবদ্ধতা ব্যবহারের চেয়ে বেশি কার্যকর।

— rom99