JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="  //rawgithub.com/angular-ui/angular-ui/master/build/angular-ui.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="controller">

<h3>Pick a brand to see the models</h3>
  <div ng-init="group = (cars | groupBy:'make')">
        <div ng-repeat="m in group | unique:'name'">
            <b><input type="checkbox" checked="true" ng-model="useMakes[$index]"/>{{m.name}}</b>
        </div>
    </div>

  <br/>
  <table border="1">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Maker</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="car in cars | filter:filterMakes()">
        <td>{{$index+1}}</td>
        <td>{{car.make.name}}</td>
        <td>{{car.model}}</td>
      </tr>
    </tbody>
  </table>

</div>
</div>

JavaScript

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

myApp.controller("controller", function($scope){
  $scope.useMakes = [];

  $scope.filterMakes = function () {
    return function (p) {
      for (var i in $scope.useMakes) {
        if (p.make == $scope.group[i] && $scope.useMakes[i]) {
          return true;
        }
      }
    };
  };

  $scope.makes = [
    {id:1, name: "BMV"},
    {id:2, name: "Ford"},
    {id:3, name: "Renault"},
    {id:4, name: "Seat"},
    {id:5, name: "Opel"}
  ]

  $scope.cars = [
    {model: '316', make: {id: 1, name: "BMV"}},
    {model: '520', make: {id: 1, name: "BMV"}},
    {model: 'Fiesta', make: {id: 2, name: "Ford"}},
    {model: 'Focus', make: {id: 2, name: "Ford"}},
    {model: 'Clio', make: {id: 3, name: "Renault"}},
    {model: 'Toledo', make: {id: 4, name: "Seat"}},
    {model: 'Leon', make: {id: 4, name: "Seat"}},
    {model: 'Insignia', make: {id: 5, name: "Opel"}},
    {model: 'Astra', make: {id: 5, name: "Opel"}},
    {model: 'Corsa', make: {id: 5, name: "Opel"}}
  ];

});

var uniqueItems = function (data, key) {
    var result = new Array();
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];

        if (result.indexOf(value) == -1) {
            result.push(value);
        }

    }
    return result;
    $log.info("result: "+result);
};

myApp.filter('groupBy', function () {
  return function (collection, key) {
    if (collection === null) return;
      return uniqueItems(collection, key);
    };
});