ngRepeat - प्रदर्शित परिणामों की सीमित संख्या

131

मैं एक विशाल AngularJS n00b हूं और मुझे समझने में कठिनाई tutorials भी मिल रही है। यह ट्यूटोरियल मुझे एक ऐप बनाने के माध्यम से चल रहा है जो फोन प्रदर्शित करता है। मैं step 5 पर हूं और मैंने एक प्रयोग के रूप में सोचा था कि मैं उपयोगकर्ताओं को यह निर्दिष्ट करने की अनुमति दूंगा कि वे कितने दिखाना चाहते हैं।ngRepeat - प्रदर्शित परिणामों की सीमित संख्या

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

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

महत्वपूर्ण:

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

यहाँ मेरी नियंत्रक है:

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

मैं इस लाइन है कि उपयोगकर्ताओं को दर्ज कर सकते हैं वे कितने परिणाम चाहते दिखाया जोड़ दिया है: दृश्य इस तरह दिखता है लाइन है:

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

मैं यह दिखाने के लिए कि कितने फोन दिखाना चाहिए, एक संख्या में हार्ड-कोड कर सकते हैं। अगर मैं 5 डालता हूं, तो 5 दिखाया जाएगा। मैं बस इतना करना चाहता हूं कि दृश्य से उस इनपुट में संख्या पढ़ें, और इसे data.splice लाइन में रखें। मैंने उद्धरण के साथ और बिना कोशिश की है, और न ही काम करते हैं। मैं यह कैसे करु?

स्रोत

2013-07-14 Captain Stack

315

थोड़ा अधिक "कोणीय रास्ता" सीधा 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

स्रोत

2013-07-14 21:07:42 Stewie

+43

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

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

@ टिमब्यूथ इस समाधान का प्रयास करें: http://stackoverflow.com/a/19665313/1095616 – Stewie

दुकान अपने सभी डेटा शुरू में

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

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

स्रोत

2013-07-14 20:32:19 shaunhusain

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

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

स्रोत

2014-02-14 16:07:39 couzzi

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

मेरे पास एक परिदृश्य था जहां मैं बैकिंग सरणी से 6 आइटम दिखाना चाहता था। 'Ng-if = "$ अनुक्रमणिका <6" का उपयोग करके मुझे पूरे सरणी को खोजने योग्य रखने के दौरान केवल पहले 6 दिखाने की अनुमति दी गई है (मेरे पास एक खोज क्षेत्र के साथ एक फ़िल्टर है)। –

यह सीमा नहीं है, अगर अधिक गिनती है तो यह पूरे परिणाम को छुपाता है। – fdrv

-3

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

जब मेरी सेवा मैं बस ऐसा किया बुला:

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

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

स्रोत

2015-08-05 15:36:54

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

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

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

यदि आपके पास ऑब्जेक्ट या बहु-आयामी सरणी है तो यह मेरे मामले में बेहतर काम करता है। यह केवल पहली चीजें दिखाएगा, अन्य को लूप में अनदेखा कर दिया जाएगा।

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

स्रोत

2016-04-01 22:48:45 fdrv

एनजी-दोहराने में सीमित संख्या में परिणाम प्रदर्शित करने के लिए फ़िल्टर का उपयोग करें।

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

स्रोत

2017-11-17 12:43:01

ngRepeat - प्रदर्शित परिणामों की सीमित संख्या

उत्तर

संबंधित मुद्दे