JSFiddle - React, Tailwind, and code Playground

by hina59

HTML

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<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> Guru99 Global Event</h1>

<div ng-app="DemoApp" ng-controller='myctrl as vm' 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" >
    {{item.name}}
  </li>
</ul>

</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.focusIndex = 0;
      console.log(scope.lookupKeyDirective);
      
      var onChildListChange=scope.$watch("lookupKeyDirective",function(oldList,newList){
      	scope.childList = newList;
      });
      
      
      scope.parentInput.off("keydown.keyDownDirective").on("keydown.keyDownDirective",function(event){
      	if(event.which === 28){
        	scope.focusIndex++;
        }
        if(event.which === 28){
        	scope.focusIndex--;
        }
      	console.log(scope.lookupKeyDirective[scope.focusIndex]);
      });      
    }
  };
});

</script>

</body>
</html>