JSFiddle - React, Tailwind, and code Playground

by bullrout

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<body ng-app="app">
    <div ng-controller="ctrl">
        <div ng-repeat="serviceName in serviceNames">
            <div class="form-group">
                <label for="cb_{{$index}}">filter all names with {{ serviceName }} in the title</label>
                <input type="checkbox" id="cb_{{$index}}" ng-model="checked" ng-change="filterByName(serviceName, checked)" />
                <br>
                <br>
            </div>
        </div>
        <div class="row col-md-9 col-lg-9 pull-right" data-ng-repeat="item in filteredCollection track by $index">{{ item.address }}</div>
    </div>
</body>

JavaScript

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

app.controller("ctrl", ["$scope", function ($scope) {
    $scope.serviceNames = ["bakery", "dispensary", "food hall", "kitchen"];
    $scope.data = {
        "list": [{
            "name": "one",
                "services": [{
                "services": [{
                    "serviceName": "has bakery"
                }, {
                    "serviceName": "has dispensary"
                }]
            }],
                "address": "22 regent st chippendale"
        }, {
            "name": "five",
                "services": [{
                "services": [{
                    "serviceName": "has kitchen"
                }, {
                    "serviceName": "has dispensary"
                }]
            }],
                "address": "23 regent st chippendale"
        }, {
            "name": "two",
                "services": [{
                "services": [{
                    "serviceName": "has bakery"
                }, {
                    "serviceName": "has dispensary"
                }, {
                    "serviceName": "has food hall"
                }, {
                    "serviceName": "has kitchen"
                }]
            }],
                "address": "24 regent st chippendale"
        }, {
            "name": "three",
                "services": [{
                "services": [{
                    "serviceName": "has food hall"
                }, {
                    "serviceName": "has kitchen"
                }]
            }],
                "address": "25 regent st chippendale"
        }]
    }
    $scope.filteredCollection = [];
    var tempObj = {};
    var filteredArray = [];
    var listObj = {};
    $scope.filterByName = function (serviceName, state) {
        if (state) {
            listObj[serviceName] = serviceName
        } else {
            delete listObj[serviceName];
        }
        
        var filteredArray = [];
        angular.forEach($scope.data.list,...