AngularJS filter nested ng-repeat based on repeated object properties

Question

I have an array of restaurant objects and I want to list them by grouping their cities

My object is like;

restaurant = {
     id: 'id',
     name: 'name',
     city: 'city'
}

This HTML Markup can give some info about what I want to do.

 <div ng-repeat="restaurant in restaurant | filter: ???">
        <div class="header">
            <h1 ng-bind="restaurant.city"></h1>
            <a>Select All</a>
        </div>
        <div class="clearfix" ng-repeat="???">
            <input type="checkbox" id="restaurant.id" />
            <label ng-bind="restaurant.name"></label>
        </div>
    </div>

Can I do it with one single array or do i need to create seperate city and restaurant arrays to do it?

Do you want to group your array of restaurants by city?

Artyom Pranovich
– Artyom Pranovich

2014-10-14 13:27:04 +00:00
Commented Oct 14, 2014 at 13:27 — Artyom Pranovich
– Artyom Pranovich, Commented Oct 14, 2014 at 13:27
Yeah this is exactly what I want to do =)

facot
– facot

2014-10-14 13:31:34 +00:00
Commented Oct 14, 2014 at 13:31 — facot
– facot, Commented Oct 14, 2014 at 13:31

Artyom Pranovich · Accepted Answer · 2014-10-14 13:55:41Z

3

If you want to group restaurants by city, you can use groupBy of angular.filter module.

Just add the JS file from here: http://www.cdnjs.com/libraries/angular-filter to your project and use following code.

var myApp = angular.module('myApp',['angular.filter']);

function MyCtrl($scope) {    
    $scope.restaurants = [
       {id: 1, name: 'RestA', city: 'CityA'},
       {id: 2, name: 'RestB', city: 'CityA'},
       {id: 3, name: 'RestC', city: 'CityC'},
       {id: 4, name: 'RestD', city: 'CityD'}
    ];
}

<div ng-controller="MyCtrl">
    <ul ng-repeat="(key, value) in restaurants | groupBy: 'city'">
        <b>{{ key }}</b>
      <li ng-repeat="restaurant in value">
          <i>restaurant: {{ restaurant.name }} </i>
      </li>
    </ul>
</div>

I've created JSFiddle for you with working example.

edited Oct 14, 2014 at 13:55

answered Oct 14, 2014 at 13:49

Artyom Pranovich

6,9728 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rick james Over a year ago

perfect. Works just as expected

Collectives™ on Stack Overflow

AngularJS filter nested ng-repeat based on repeated object properties

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related