JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

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

JavaScript

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);
});