JSFiddle - React, Tailwind, and code Playground

by KevinIsNowOnline

HTML

<div ng-app="app" ng-controller="MainController">
    Recent Studies: <input type="textbox" ng-model="filterString">
    <ul>
        <li ng-repeat="filter in filterList">{{filter}}<span ng-click="remove($index)">x</span></li>
    </ul>
    <button ng-click="add(filterString)">Add Filter</button>
    <table class="fancyTable">
        <tr>
            <th>Study id</th>
            <th>Study  name</th>
            <th>Owner</th>
        </tr>
        <tr>
            
            <td><input ng-model="study_id" /></td>
            <td><input ng-model="study_name" /></td>
            <td><input ng-model="owner" /></td>
        </tr>
        <tr ng-repeat="player in players  |  filter: myFilter()">
            <td>{{player.id}}</td>
            <td>{{player.name}}</td>
            <td>{{player.owner}}</td>
        </tr>
    </table>
</div>

CSS

.fancyTable {
    border:1px dotted green;
    background-color: #ded7d1;
}

.fancyTable td {
    padding: 5px;
}

JavaScript

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

app.controller('MainController', function ($scope) {
   
    $scope.filterList = [];
    $scope.filterString="";
    $scope.add = function(str){
        //put splitter here
        var kVp = str.split(':');
        var tempObject = {};
         tempObject['field']=kVp[0];
        tempObject['condition']=kVp[1];
             
        
        
       $scope.filterList.push(tempObject)
    };
    
    $scope.myFilter = function(){
          //use filterList
        var filters = {};
          console.log($scope.filterList);
        
        for(var index in $scope.filterList){
            filters[ $scope.filterList[index].field] =  $scope.filterList[index].condition;      
            
        }
        
        
    
      
        //end goal
        return filters;
    };
    $scope.remove = function(index){
          $scope.filterList.splice(index,1);
    };
    $scope.players = [
       {"name": "Rod Laver Study",
            "id": "STU114548",
            "owner": "Kevin"},
        {"name": "Rod Clive  Study",
            "id": "STU114987",
            "owner": "Bryan"},
        {"name": "Boris Becker  Study", 
            "id": "STU114347",
            "owner": "Nicole"},
        {"name": "John McEnroe  Study",
            "id": "STU114398",
            "owner": "Tina"},
        {"name": "Rafa Nadal  Study",
            "id": "STU114497",
            "owner": "Rachelle"}
    ];
    
      
  
});