JSFiddle - React, Tailwind, and code Playground

by KevinIsNowOnline

HTML

<div ng-app="app" ng-controller="MainController">
    Recent Studies: <input type="textbox" ng-model="filterString">
    <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.study_id = "";
    $scope.study_name = "";
    $scope.owner = "";
    $scope.filterString = "";
    $scope.myFilter = function(){
        debugger;
        
        var searchString =  $scope.filterString;
        
        if(searchString === ""){
            return {}   
        }
        
        var splittedParams = searchString.split(',');
        
       
        var filters = {};
            debugger;
                      
        for (var i = 0; i <= splittedParams.length-1; i++) {

            var currItem = splittedParams[i].split(':');
            
            
            filters[currItem[0]] = currItem[1]
            
           
        }  
        
     
        debugger;
        
        return filters ;
    }
    
    $scope.players = [
        {"name": "Rod Laver",
            "id": "STU114548",
            "date": "1938/8/9",
            "imageUrl": "img/rod-laver.gif",
            "owner": "Kevin"},
        {"name": "Rod Clive",
            "id": "STU114987",
            "date": "1938/8/9",
            "imageUrl": "img/rod-laver.gif",
            "owner": "Bryan"},
        {"name": "Boris Becker", 
            "id": "STU114347",
            "date": "1967/11/22",
            "imageUrl": "img/boris-becker.gif",
            "owner": "Nicole"},
        {"name": "John McEnroe",
            "id": "STU114398",
            "date": "1959/2/16",
            "imageUrl": "img/john-mc-enroe.gif",
            "owner": "Tina"},
        {"name": "Rafa Nadal",
            "id": "STU114497",
            "date": "1986/5/24",
            "imageUrl": "img/ndl.jpg",
            "owner": "Rachelle"}
    ];
    
      
  
});