JSFiddle - React, Tailwind, and code Playground

by ganarajpr

HTML

<html ng-app="test">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body ng-controller="TestController">
    Choose a position: 
    <test-location-picker positions="departmentPositions" ng-model="mySelectedPosition"></test-location-picker>
    The selected position is: {{mySelectedPosition}}
</body>

</html>

CSS

.position {
    cursor: pointer;
    border: solid 1px blue;
    margin: 5px;
    padding: 5px;
}

JavaScript

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

module.controller('TestController', function($scope) {
    $scope.departmentPositions = [
        'Test Position 1',
        'Test Position 2',
        'Test Position 3',
        'Test Position 4'            
    ];
    
    $scope.mySelectedPosition = '';
});

module.directive('testLocationPicker', function() {

    var linkFn = function(scope, element, attrs,ngModel) {
        if(!ngModel) return; // do nothing if no ng-model
        
        // Specify how UI should be updated
        ngModel.$render = function() {
          //we dont want the view to be updated.
        };
        
        
        attrs.$observe('positions',function(value){
           scope.$positions = scope[value]; 
        });
        
        
        
        ngModel.$setViewValue(0); 
        
        scope.onClick = function($event,$index){
          ngModel.$setViewValue($index+1);              
        }
    };
    
    return {
        link: linkFn,
        restrict: 'E',
        require : '?ngModel',
        template: '<div class="position" ng-repeat="position in $positions" ng-click="onClick($event,$index)">{{position}}</div>',            
    }        
    
});