Question

我有一个AngularJS控制器，其中有一个对象数组。我想从此数组中具有特定key：value对的特定对象开始进行迭代。同样，迭代次数必须限制为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
];
}]);

这是<products>标签的HTML文件：

<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管道使用过滤器功能。

我希望这会有所帮助。

AngularJS，从对象数组中的特定对象开始ng-repeat

1 个答案: