JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        Is Angular JS Working ? <span class="testMsg">{{test}}</span>
    <hr></hr>
        <h4>::::You can select multiple Values in each category::::</h4>
         <table>
             <tr>
                 <td width=50px>Dept  </td>
                 <td>
<select class="selectBox" multiple="multiple" ng-model="selectedDept" ng-options="emp.dept as emp.dept for emp in empList | unique:'dept'"></select>
                 </td>
             </tr>
             <tr>
                 <td width=50px>Gender  </td>
                 <td>
<select class="selectBox" multiple="multiple" ng-model="selectedGender" ng-options="emp.gender as emp.gender for emp in empList | unique:'gender'"></select>
                 </td>
             </tr>
             <tr>
                 <td width=50px>Employees  </td>
                 <td>
<select class="selectBox" multiple="multiple" ng-model="selectedNames" ng-options="emp.name as emp.name for emp in empList | filterMultiple:{dept:selectedDept,gender:selectedGender}"></select>                     
                 </td>
             </tr>
        </table>
        <hr></hr>
        <h4>::::Employee Details.. based on above filters:::</h4>
        <table class="empTable">
            <tr>
                <th>Name</th>
                <th>Gender</th>
                <th>Dept</th>
            </tr>
<tr ng-repeat="emp in empList | filterMultiple:{dept:selectedDept,gender:selectedGender,name:selectedNames}">             
                <td>{{emp.name}}</td>
                <td>{{emp.gender}}</td>
                <td>{{emp.dept}}</td>
            </tr>
        </table>
       
    </div>
</div>

CSS

.testMsg{
    background:silver;
    color:green;
    font-weight:bold;
}
.empTable{border:1px solid green;}
.empTable th{font-weight:bold;text-align:center;background:grey;}
.empTable td,.empTable th{
    width:120px;
    height:30px;
    border:1px solid green;
}

.selectBox{
    width:120px;
    
}

JavaScript

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller('MyCtrl',['$scope',function ($scope) {
    $scope.test = "Yes";
    $scope.empList = [
                    {"dept":"account","name":"John","gender":"male"},
                    {"dept":"sales","name":"Ram","gender":"male"},
                    {"dept":"travel","name":"Peter","gender":"male"},
                    {"dept":"hr","name":"jane","gender":"male"},
                    {"dept":"account","name":"rose","gender":"female"},
                    {"dept":"sales","name":"mary","gender":"female"},
                    {"dept":"sales","name":"mark","gender":"male"},
                    {"dept":"account","name":"maria","gender":"female"},
                    {"dept":"travel","name":"lee","gender":"male"},
                    {"dept":"sales","name":"hulk","gender":"male"},
                    {"dept":"hr","name":"spiderman","gender":"male"},
                    {"dept":"travel","name":"potter","gender":"male"}
                ];
    
}]);


//filter Multiple...
myApp.filter('filterMultiple',['$filter',function ($filter) {
	return function (items, keyObj) {
		var filterObj = {
							data:items,
							filteredData:[],
							applyFilter : function(obj,key){
								var fData = [];
								if(this.filteredData.length == 0)
									this.filteredData = this.data;
								if(obj){
									var fObj = {};
									if(!angular.isArray(obj)){
										fObj[key] = obj;
										fData = fData.concat($filter('filter')(this.filteredData,fObj));
									}else if(angular.isArray(obj)){
										if(obj.length > 0){	
											for(var i=0;i<obj.length;i++){
												if(angular.isDefined(obj[i])){
													fObj[key] = obj[i];
													fData = fData.concat($filter('filter')(this.filteredData,fObj));	
												}
											}
											
										}										
									}									
									if(fData.length >...