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

Displaying a grid of images sorted by category using angularjs

本文关键字：排序 图像 网格 angularjs 显示 使用      更新时间：2023-09-26

我正在使用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-repeat，但我不确定如何合并。

基于groupby使用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 =预览

相关文章：