NgRepeat का उपयोग करते समय प्रदर्शित परिणामों की सीमित संख्या

148

मुझे समझने के लिए AngularJS ट्यूटोरियल कठिन लगता है; यह एक ऐसा ऐप बना रहा है जो फोन प्रदर्शित करता है। मैं चरण 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पंक्ति में रखें। मैंने उद्धरणों के साथ और उसके बिना कोशिश की है, और न ही काम किया है। मैं यह कैसे करु?

— कप्तान स्टैक
स्रोत

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

यह इंगित करने के लायक है - और किसी और को कुछ मिनटों में बचाने के लिए - कि अगर आप "ट्रैक बाय" का उपयोग कर रहे हैं तो इसे फ़िल्टर के बाद अंतिम होना चाहिए।

— stephan.com

3

क्या फ़िल्टर और लिमिट का उपयोग करते समय उपलब्ध वस्तुओं की संख्या प्राप्त करने का एक तरीका है? मैं उपयोग करना चाहूंगा limitToलेकिन सीमा बढ़ाने के लिए "अधिक लोड" बटन प्रदान करूंगा । यह केवल तभी प्रदर्शित होना चाहिए जब अधिक रिकॉर्ड उपलब्ध हो।

— टिम बुथ

क्या है filter:query?

— बिग बी'

ओपी के सवाल प्रति @defmx, queryसे आता हैSearch: <input ng-model="query">

— jusopi

45

पार्टी में थोड़ी देर हो गई, लेकिन यह मेरे लिए काम कर गया। उम्मीद है कि किसी और को यह उपयोगी लगता है।

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

— couzzi
स्रोत

2

मुझे संदेह है कि अगर यह एक बड़ी सरणी है, तो limitToFilter का उपयोग करने की तुलना में यह कम कुशल होगा, क्योंकि संभवतः हर आइटम का मूल्यांकन किया जाना है

— rom99

3

मेरे पास एक ऐसा परिदृश्य था जहाँ मैं 6 वस्तुओं को बहुत अधिक के बैकिंग सरणी से दिखाना चाहता था। का उपयोग कर ng-if="$index < 6"मुझे जबकि पूरे सरणी खोजा रखने केवल पहले 6 दिखाने की अनुमति दी (मैं एक फिल्टर एक खोज फ़ील्ड के साथ संयुक्त है)।

— जीरो वेनवेल

यह सीमा नहीं है, यह पूरे परिणाम को छिपाता है यदि अधिक गिनती हो तो 3.

— fdrv

@ Jek-fdrv - नहीं, ng-ifइस मामले में, पुनरावर्तक के DOM तत्व को प्रस्तुत नहीं करेगा, $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)
  });
}

EDIT ने गलती से घड़ी को कंट्रोलर के बाहर रख दिया था जो उसके अंदर होना चाहिए था।

— shaunhusain
स्रोत

2

यहाँ html पर अपने फ़िल्टर को सीमित करने का एक आसान तरीका है, उदाहरण के लिए मैं समय पर 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

इसे प्राप्त करने के लिए एक और (और मुझे बेहतर लगता है) तरीका वास्तव में डेटा को इंटरसेप्ट करना है। limitTo ठीक है, लेकिन क्या होगा यदि आप 10 तक सीमित कर रहे हैं जब आपके सरणी में वास्तव में हजारों होते हैं?

अपनी सेवा को कॉल करते समय मैंने बस यही किया:

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

यह देखने के लिए जो भेजा जाता है, उसे सीमित करता है, इसलिए सामने वाले के लिए ऐसा करने से बेहतर प्रदर्शन होना चाहिए।

— मैट सॉन्डर्स
स्रोत

LimitTo के कार्यान्वयन में array.slice () का उपयोग किया गया है, वैसे भी, सरणी के आकार में किसी भी अंतर को प्रदर्शन पर उतना ही अंतर होना चाहिए जितना कि इसे स्वयं करना। github.com/angular/angular.js/blob/master/src/ng/filter/…

— rom99

लेकिन limitTo वास्तव में दृश्य में भेजे गए डेटा को सीमित नहीं करता है, जबकि यह इस तरह से करता है। मैंने इसे कंसोल.लॉग () का उपयोग करके परीक्षण किया।

— मैट सॉन्डर्स

1

हां, आप जो कर रहे हैं, वह देखने के लिए एक नई सरणी को उजागर कर रहा है (मैं वास्तव में इसे कहीं भी 'भेजने' के रूप में नहीं सोचूंगा)। यदि आप डेटा में केवल पहले 10 आइटम्स में रुचि रखते थे, और डेटा को कहीं और संदर्भित नहीं किया जाता है, तो इस तरह से करने से मेमोरी फ़ुटप्रिंट कम हो सकता है (डेटा को एकत्र किया गया कचरा हो सकता है)। लेकिन अगर आप अभी भी dataआसपास का संदर्भ रख रहे हैं , तो यह लिमिटेओ का उपयोग करने से अधिक कुशल नहीं है।

— rom99