JSFiddle - React, Tailwind, and code Playground

by bullrout

HTML

<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
<!doctype html>
    <html  ng-app>
    <body ng-controller="pdelistCtrl">
<br/>
                CATEGORIES : (OR filter)<br/><br/>
                <ul ng:repeat="category in categories">
                    <li>
                        <input type="checkbox" checked="checked" ng:model="categories[category._id]"> {{category.name}}
                        <br/>
                        ---- details : (AND filter)
                        <br/>
                        <ul ng-repeat="detail in categoryDetails(category)">
                            <li>
                                ---- <input type="checkbox" ng:model="details[detail._id]"> {{detail.name}}
                            </li>
                        </ul>
                    <br/><br/>
                    </li>
                </ul>

                <br/><br/>
                LIST OF ARTICLES : {{categories[category._id]}}<br/>
                <div ng-repeat="article in articles | filter:articlesFilter"><p>{{article.title}}</p></div>
                
        </body>
    </html>

JavaScript

function pdelistCtrl($scope, $filter) {

    var categoriesList = [
            {"_id":"4f60773657cd690001000023", "name":"Hotels"},
            {"_id":"4f621f25eccf2f0001000100", "name":"Campings"},
            {"_id":"4f5e1c671e4f4e0001000005", "name":"Bed and breakfast"}
        ];
    $scope.categories = categoriesList;


    var detailsList = [
            {"_id":"4f853bc4bbc6b90001000003", "category_id":"4f621f25eccf2f0001000100", "name":"option 1"},
            {"_id":"4f853be2bbc6b90001000005", "category_id":"4f621f25eccf2f0001000100", "name":"option 2"},
        {"_id":"4f853be2bbc6b90001000008", "category_id":"4f60773657cd690001000023", "name":"option 3"},
        {"_id":"4f853be2bbc6b90001000009", "category_id":"4f5e1c671e4f4e0001000005", "name":"option 4"}
        ];
    $scope.details = detailsList;        



   var articlesList = [
        {    
            "_id":"ida1",
            "title":"Hotel 1",
            "category_id":"4f60773657cd690001000023",
            "checkboxfilters": [{"filter_id":"4f853be2bbc6b90001000008"}],
        },
        {    
            "_id":"ida2",
            "title":"Hotel 2",
            "category_id":"4f60773657cd690001000023",
            "checkboxfilters": [],
        },
        {    
            "_id":"ida3",
            "title":"Camping 1",
            "category_id":"4f621f25eccf2f0001000100",
            "checkboxfilters": [{"filter_id":"4f853bc4bbc6b90001000003"}, {"filter_id":"4f853be2bbc6b90001000005"}],
        },
        {    
            "_id":"ida4",
            "title":"Camping 2",
            "category_id":"4f621f25eccf2f0001000100",
            "checkboxfilters": [{"filter_id":"4f853be2bbc6b90001000005"}],
        },
        {    
            "_id":"ida5",
            "title":"Bed and Breakfast 1",
            "category_id":"4f5e1c671e4f4e0001000005",
            "checkboxfilters": [],
        },
        {    
            "_id":"ida6",
            "title":"Bed and Breakfast 2",
           ...