AngularJS, start ng-repeat from particular object in array of objects - angularjs

Question

I have a AngularJS controller in which there is an array of objects. I want to start iterating from a particular object in this array which has a particular key:value pair. Also iterations must be limited to only 4.
Here is the controller code:
app.controller("products", ["$scope", function($scope) {
$scope.products = [
{
code: 1234,
icon: "../product/images/abc.jpeg",
name: "One",
description: "lorem ipsum sil vous plait 1",
link:"a.php",
price: 100,
stock: ""
},
{
code: 1235,
icon: "../product/image/def.jpeg",
name: "Two",
description: "lorem ipsum sil vous plait 2",
link:"b.php",
price: 200,
stock: ""
},
// more such objects
];
}]);
Here is the HTML file for <products> tag:
<div class="card">
<div class="card-image">
<img ng-src="{{ info.icon }}">
</div>
<div class="card-content">
<p>{{ info.name }}</p>
<p>{{ info.price }}</p>
</div>
</div>
Here is the HTML:
<div ng-controller="products">
<div ng-repeat="product in products | limitTo:4">
<products info="p"></products>
</div>
</div>
I want to start iterating from object having code: 1235 and want to end it after 4 iterations. I am new to AngularJS, any help would be appreciated.

Answer 1

angular.module('myapp', []).controller("products", ["$scope", function($scope) {
$scope.filterData = function(y) {
return function(x) { return x.code >= y;}
}
$scope.products = [{
code: 1234,
icon: "../product/images/abc.jpeg",
name: "One",
description: "lorem ipsum sil vous plait 1",
link: "a.php",
price: 100,
stock: ""
},
{
code: 1235,
icon: "../product/image/def.jpeg",
name: "Two",
description: "lorem ipsum sil vous plait 2",
link: "b.php",
price: 200,
stock: ""
},
{
code: 1236,
icon: "../product/image/def.jpeg",
name: "Three",
description: "lorem ipsum sil vous plait 2",
link: "b.php",
price: 200,
stock: ""
},
{
code: 1237,
icon: "../product/image/def.jpeg",
name: "Four",
description: "lorem ipsum sil vous plait 2",
link: "b.php",
price: 200,
stock: ""
},
{
code: 1238,
icon: "../product/image/def.jpeg",
name: "Five",
description: "lorem ipsum sil vous plait 2",
link: "b.php",
price: 200,
stock: ""
},
{
code: 1240,
icon: "../product/image/def.jpeg",
name: "Six",
description: "lorem ipsum sil vous plait 2",
link: "b.php",
price: 200,
stock: ""
},
{
code: 1241,
icon: "../product/image/def.jpeg",
name: "Seven",
description: "lorem ipsum sil vous plait 2",
link: "b.php",
price: 200,
stock: ""
}
// more such objects
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="myapp" ng-controller="products">
<div ng-repeat="info in products| filter: filterData(1235) | limitTo:4">
<div class="card">
<div class="card-image">
<img ng-src="{{ info.icon }}">
</div>
<div class="card-content">
<p>{{ info.name }}</p>
<p>{{ info.price }}</p>
</div>
</div>
</div>
</div>
You can have filter function with limitTo pipe.
I hope this will help.