Displaying a grid of images sorted by category using angularjs

Question

I am building a web application using angular and I want to display a grid of items sorted by category. Each row will correspond to a certain category. This is what my code looks like:

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

My controller.js file looks like this:

.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'}
                      ];

})

I believe I need nested ng-repeats but I am not sure how to incorporate that.

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

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

edited May 23 '17 at 11:51

Community

1
1

answered May 25 '15 at 23:10

kwangsa

1,701
12
16

hanks for the reply. How do I display elements from the same category in the same row rather than one item each row? – sipnice May 27 '15 at 00:47
can you provide example how you want it ? – kwangsa May 27 '15 at 01:11
Right now everything is being outputted on a different line. For instance Broccoli and lettuce are under the same category but is printed out on a different line. Is there a way to sort them such that a particular row corresponds only to a particular category (such as 'vegetables',fruits or dairy?) – sipnice May 27 '15 at 02:21
Sounds like you dont need grouping and just a sorting. If yes, then remove groupBy and just using orderBy:['category','name'] – kwangsa May 27 '15 at 03:23
Ahh that didn't really work. Items of the same category still showed up on the same row. Even though they are categorized, they show up together. For instance, if there were two fruit items and two vegetable items, they showed up on the same row. – sipnice May 27 '15 at 05:10
sorry, i am misunderstood your requirement, updated plunkr http://plnkr.co/edit/shwQQyrLnjxOXLPqcoyy?p=preview – kwangsa May 27 '15 at 05:22
Hey, this is my updated plunkr. If you maximize your screen you see that several items show up in one row. However, I don't want vegetables and fruits to appear in the same row. I want different rows for them. :/ http://plnkr.co/edit/wH94Jmqlm9QVB6UvoxPS?p=preview – sipnice May 27 '15 at 05:40

Displaying a grid of images sorted by category using angularjs

1 Answers1