JSFiddle - React, Tailwind, and code Playground

by hina59

HTML

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1 class="active"> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller='myctrl as vm'> 
<div key-up-down-dir>
<input type='text' ng-model="patient" />

<ul lookup-key-directive='vm.items'>
  <li ng-repeat="item in vm.items track by $index"> 
     <div>
       List Item : <span ng-class="innerspan">{{item.name}}</span>      
     </div>
  </li>  
</ul>
</div>

<div key-up-down-dir>
<div>
  <div>
    <input type='text' ng-model="patientCode"  />
  </div>
</div>
<div> 
  <div>  
    <input type='text' ng-model="patientName"  />
  </div>
</div>
    <table>
    <tbody lookup-key-directive='vm.items'>
      <tr ng-repeat="item in vm.items track by $index"> 
         <td>List Item : <span ng-class="innerspan">{{item.name}}</span></td>
      </tr>  
    </tbody>
    </table>
</div>
</div>

<script type="text/javascript">
	
    var app = angular.module('DemoApp',[]);
  	app.controller('myctrl', validateMask);

 function validateMask() {
   var vm = this; 
   vm.items = [
   	{name:'a'},{name:'b'},{name:'c'},{name:'d'}
   ];
 }
 
app.directive("keyUpDownDir", function () {
  return {  	
    restrict: "A",
    controller: function ($scope,$element,$attrs) {
    	this.searchInput = $element.find("input");      
    }
  };
});

app.directive("lookupKeyDirective", function () {
  return {
  	require:"^keyUpDownDir",
  	scope:{
    	lookupKeyDirective:'=',
    },    
    restrict: "A",
    link: function (scope, element, attrs, ctrl) {
      scope.parentInput = ctrl.searchInput;
      scope.parentElement = element;
      console.log(scope.parentInput);
      scope.focusIndex = 0;
      console.log(scope.lookupKeyDirective);
      
       
      
     ...

CSS

.active > *{
     background-color:green;
     color:white;
}
.innerspan:focus-within{
  color:#846123;
}