JSFiddle - React, Tailwind, and code Playground

by Alan Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-animate.js"></script>
<div class="content" ng-app="myApp" ng-controller="c">

<div class="searchFilterContainer">
    
    <div class="categoriesSelector">
        <div  ng-repeat="category in categories" ng-class="{categoryEntryHighlighted : category.selected, categoryEntry : !category.selected}" ng-click="selectCategory($index)">
            <span class="categoryEntryText">{{category.text}}</span>
            </div>
        </div>
    
    
    <div class="filterSelector">
        </div>
    
    
    </div>
</div>

CSS

.content
{
    width:300px;
    height:300px;
}




.searchFilterContainer
{
    width:150px;
    height:100px;
    border-bottom-right-radius:5px;
    border-bottom-left-radius:5px;
    box-shadow: 0 2px 4px rgb(240,240,240);
    border:1px solid rgb(240,240,240);
    background:white;
    box-sizing:border-box;
}


.categoriesSelector
{
    width:50%;
    height:100%;
    overflow:hidden;
    position:relative;
    float:left;
    box-sizing:border-box;
    display:inline-block;
}





.categoryEntry
{
    width:100px;
    height:30px;
    box-sizing:border-box;
    border-bottom:1px dotted rgb(240,240,240);
}


.categoryEntryHighlighted
{
    width:100px;
    height:30px;
    box-sizing:border-box;
    border-bottom:1px dotted rgb(240,240,240);
    background:cornflowerblue;
}



.categoryEntryText
{
    font-size:.9em;
    color:#616161;
}




.filterSelector
{
    width:50%;
    height:100%;
    overflow:hidden;
    position:relative;
    float:right;
    box-sizing:border-box;
    display:inline-block;
}

JavaScript

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

mod.controller('c',function($scope)
               {

	$scope.categories = [{text : 'games',selected : true},{text : 'sdgfs',selected : false},{text : 'jvsvfa',selected : false},{text : 'social',selected : false},{text : 'dream',selected : false}];
    
    $scope.unmodCats = [{text : 'all',selected : true},{text : 'sdgfs',selected : false},{text : 'jvsvfa',selected : false},{text : 'social',selected : false},{text : 'dream',selected : false}];
    
    
    $scope.searchCategories = ['all'];

    $scope.selectCategory = function(index){
    	var nom = $scope.categories[index].text;
        
        var selected = $scope.categories[index].selected;
        
        if(!selected)
        {
            if(nom === 'all')
            {
                $scope.searchCategories = ['all'];
                $scope.emptySelected();
            }
            else
            {
                if($scope.searchCategories[0] === 'all')
                {
                    $scope.searchCategories.splice(0,1);
                    $scope.categories[0].selected = false;
                }

                $scope.categories[index].selected = true;
                $scope.searchCategories.push(nom);
            }
        }
        else
        {
            if(nom === 'all')
            {
            	return;
            }
            else
            {
            var eitheta = $scope.searchCategories.indexOf(nom);
            
             if($scope.searchCategories.length == 1)
             {
             	$scope.searchCategories = ['all'];
                $scope.emptySelected(); 
             }
            else{
                
            $scope.searchCategories.splice(eitheta,1);  
                
            }
        	$scope.categories[index].selected = false;
             
            
                
            }
        }
        
    };
    
    
    $scope.emptySelected = function(){}
    {
    	$scope.categories =...