Question

我正在使用angular构建一个Web应用程序，我想显示按类别排序的项目网格。每行将对应于某个类别。这就是我的代码：

<ion-item ng-repeat="item in items|filter:query|orderBy:'name' "> 
  <div class="row" ng-scrollable style="width:400px;height:300px;">
    <div class="col">
      <img ng-src={{item.img}}/>
      <p>{{item.name}}</p>
      <p>Old Price: {{item.newPrice}}</p>
      <p>New Price: {{item.newPrice}}</p>
      <button class ="button" ng-click="addToGrocery()">Add to List</button>

    </div>

  </div>

我的controller.js文件如下所示：

.controller('CouponsCtrl', function($scope) {

$scope.items = [{ name: 'Banana', newPrice: 3.29, oldPrice: 4.49, aisle: 'A', img: 'http://placehold.it/280x150', category: 'Fruits' },
                      { name: 'Chocolate', newPrice: 3.19, oldPrice: 5.39, aisle: 'B', img: 'http://placehold.it/280x150' , category: 'Dairy'},

                      { name: 'Brocolli', newPrice: 2.29, oldPrice: 4.40, aisle: 'D', img: 'http://placehold.it/280x150' , category: 'Vegetables'}
                      ];

})

我相信我需要嵌套的ng-repeats，但我不确定如何合并。

Answer 1

基于groupby Group item detail using AngularJs ng-repeat

<body ng-controller="con">
<div ng-repeat="(setKey, set) in items|filter:query|orderBy:'name'|groupBy:'category'">
  {{setKey}}
  <div ng-repeat="item in set">
  <div class="row" ng-scrollable="" style="width:400px;height:300px;">
    <div class="col">
      <img ng-src="{{item.img}}/" />
      <p>{{item.name}}</p>
      <p>Old Price: {{item.newPrice}}</p>
      <p>New Price: {{item.newPrice}}</p>
      <button class="button" ng-click="addToGrocery()">Add to List</button>
    </div>
  </div>
  </div>
</div>
</body>

http://plnkr.co/edit/GMW52iJyRlQ2otZndGLM?p=preview

使用angularjs显示按类别排序的图像网格

1 个答案: