JSFiddle - React, Tailwind, and code Playground

by r0m4n

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <a href="" ng-click="ourGrouper ='color'">Color</a>
    <a href="" ng-click="ourGrouper ='makeid'">Make</a>

    <ul ng-repeat="(key, value) in cars | orderBy: 'color' | groupBy:ourGrouper">
      <li>{{key}}
        <ul>
          <li ng-repeat="car in value | orderBy: 'carname'">
            {{car.carname}}
          </li>
        </ul>
      </li>
    </ul>
  </div>

</div>

JavaScript

var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', ['$scope', function($scope) {
  $scope.ourGrouper = 'color';
  $scope.cars = [{
    "carid": 1,
    "makeid": 1,
    "carname": 'camry',
    "color": 'red'
  }, {
    "carid": 2,
    "makeid": 2,
    "carname": 'mustang',
    "color": 'red'
  }, {
    "carid": 3,
    "makeid": 1,
    "carname": 'landcruiser',
    "color": 'yellow'
  }, {
    "carid": 4,
    "makeid": 1,
    "carname": 'focus',
    "color": 'blue'
  }, {
    "carid": 5,
    "makeid": 3,
    "carname": 'civic',
    "color": 'blue'
  }];
}]);