আমি আমার তালিকায় পৃষ্ঠাগুলি যুক্ত করার চেষ্টা করছি। আমি অ্যাঙ্গুলারজেএস টিউটোরিয়ালটি অনুসরণ করেছি, এটি স্মার্টফোনগুলির একটি এবং আমি কেবলমাত্র নির্দিষ্ট সংখ্যক অবজেক্ট প্রদর্শন করার চেষ্টা করছি। আমার এইচটিএমএল ফাইলটি এখানে:
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span2'>
Search: <input ng-model='searchBar'>
Sort by:
<select ng-model='orderProp'>
<option value='name'>Alphabetical</option>
<option value='age'>Newest</option>
</select>
You selected the phones to be ordered by: {{orderProp}}
</div>
<div class='span10'>
<select ng-model='limit'>
<option value='5'>Show 5 per page</option>
<option value='10'>Show 10 per page</option>
<option value='15'>Show 15 per page</option>
<option value='20'>Show 20 per page</option>
</select>
<ul class='phones'>
<li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>
<a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>
<a href='#/phones/{{phone.id}}'>{{phone.name}}</a>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
প্রদর্শিত আইটেমের সংখ্যা সীমাবদ্ধ করার জন্য আমি কয়েকটি মান সহ একটি নির্বাচন ট্যাগ যুক্ত করেছি। আমি এখন যা চাই তা হল পরের 5, 10 ইত্যাদি প্রদর্শন করার জন্য পৃষ্ঠাগুলি যুক্ত করা is
আমার একটি নিয়ামক রয়েছে যা এটির সাথে কাজ করে:
function PhoneListCtrl($scope, Phone){
$scope.phones = Phone.query();
$scope.orderProp = 'age';
$scope.limit = 5;
}
এবং জেএসন ফাইলগুলি থেকে ডেটা পুনরুদ্ধার করার জন্য আমার কাছে একটি মডিউলও রয়েছে।
angular.module('phonecatServices', ['ngResource']).
factory('Phone', function($resource){
return $resource('phones/:phoneId.json', {}, {
query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}
});
});