AngularJS, запустить ng-repeat от определенного объекта в массиве объектов

Question

У меня есть контроллер AngularJS, в котором есть массив объектов.Я хочу начать итерацию с определенного объекта в этом массиве, который имеет конкретную пару ключ: значение.Также итерации должны быть ограничены только 4.

Вот код контроллера:

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

Вот HTML-файл для тега <products>:

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

Вот HTML-код:

<div ng-controller="products">
    <div ng-repeat="product in products | limitTo:4">
        <products info="p"></products>
    </div>      
</div>

Я хочу начать итерацию с объекта, имеющего code: 1235, и хочу завершить его после 4 итераций.Я новичок в AngularJS, любая помощь будет оценена.

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>

У вас может быть функция фильтра с каналом limitTo.

Надеюсь, это поможет.