Show html elements based on object property in Angular JS

Question

This is my code for showing simple drop down list

var products = [
    {
        "id": 1,
        "name": "Product 1",
        "price": 2200,
        "category": "c1"

    },
    {
        "id": 1,
        "name": "Product 2",
        "price": 2200,
        "category": "c2"
    },
    {
        "id": 1,
        "name": "Product 3",
        "price": 2200,
        "category": "c1"
    },
    {
        "id": 1,
        "name": "Product 4",
        "price": 2200,
        "category": "c3"
    },
    {
        "id": 1,
        "name": "Product 5",
        "price": 2200,
        "category": "c3"
    }
];

<div ng-repeat="product in products" class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li ng-repeat="product in products"><a href="#">{{product.name}}</a></li>
  </ul>
</div>

I want to show drop down list based on category, if there are 3 categories in object I want 3 drop down list with their products showing inside their drop down list if 2 category then 2 drop down lists and so on.

Can anyone help me how to achieve this? I am new to Angular.

Thank you

Answer 1

The tip in the comments to the other SO question is really helpful.

You could do it with the mentioned library with $scope.categories = $filter('groupBy')($scope.products, 'category') in your controller or with ng-repeat="(group, cat) in ( products | groupBy : 'category')" in your markup.

Please have a look at the demo below or in this fiddle.

angular.module('demoApp', ['ui.bootstrap', 'angular.filter'])
    .controller('mainController', function ($scope, $filter) {
    $scope.products = [{
        "id": 1,
            "name": "Product 1",
            "price": 2200,
            "category": "c1"

    }, {
        "id": 2,
            "name": "Product 2",
            "price": 2200,
            "category": "c2"
    }, {
        "id": 3,
            "name": "Product 3",
            "price": 2200,
            "category": "c1"
    }, {
        "id": 4,
            "name": "Product 4",
            "price": 2200,
            "category": "c3"
    }, {
        "id": 5,
            "name": "Product 5",
            "price": 2200,
            "category": "c3"
    }];

    $scope.categories = $filter('groupBy')($scope.products, 'category');
    console.log($scope.categories);
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js"></script>
<script src="https://cdn.rawgit.com/a8m/angular-filter/master/dist/angular-filter.js"></script>

<div ng-app="demoApp" ng-controller="mainController">
    <div class="dropdown" dropdown>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>Select products<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li  ng-repeat="product in products"><a href="#">{{product.name}}</a></li>
        </ul>
    </div>
    <div dropdown>
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" dropdown-toggle>Select category<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li ng-repeat="(group, cat) in categories">
            <!--{{group}}
            {{cat}}-->
                <strong>category: {{group}}</strong>
            <a href="#" ng-repeat="item in cat">{{item.name}}</a>
        </li>
        </ul>
    </div>
</div>