顯示使用angularjs按類別排序的圖像網格

我正在構建一個使用角度的web應用程序，我想顯示按類別排序的網格項目。每一行將對應一個特定的類別。這是我的代碼如下所示：顯示使用angularjs按類別排序的圖像網格

<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-重複，但我不知道如何整合這一點。在GROUPBY

來源

2015-05-25 sipnice

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

來源

2015-05-25 23:10:12 kwangsa

漢克斯的答覆。如何在同一行顯示同一類別的元素，而不是每行顯示一個項目？ – sipnice

你能提供你想要的例子嗎？ – kwangsa

現在一切都在不同的線路上輸出。例如西蘭花和萵苣屬於同一類別，但打印在不同的行上。有沒有辦法對它們進行排序，使得特定的行只對應於特定的類別（如「蔬菜」，水果或乳製品？） – sipnice

顯示使用angularjs按類別排序的圖像網格

回答

相關問題