JSFiddle - React, Tailwind, and code Playground

by marcolepsy

HTML

<!DOCTYPE html>
 <html  ng-app="myApp">
     <head>
          <link data-require="[email protected]" data-semver="3.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
     <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.10" src="http://code.angularjs.org/1.2.10/angular.js"></script>
    <script data-require="bootstrap@*" data-semver="3.0.3" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
     </head>
     <body ng-controller="filterController">
<button title="Filter" type="button" name="filter-node-btn" class="filter-node-btn">open</button>
<div class="filterNodeDialog"  >        	        		
	        		<div class="filterCriteriaContent">	   
	        			<form name="filterCriteriaForm">     		        		  
		        		   <input type="radio" name="filterOption" value="hdnodes" ng-model="filterOption" ng-change="setFilterOption();">
							    	<span>All HD nodes</span>			
						   <br/>			 
						   <input type="radio" name="filterOption" value="gnodes" ng-model="filterOption" ng-change="setFilterOption();">
							    	<span>All G nodes</span>
							<br/>
							<input type="radio" name="filterOption" value="clusters" ng-model="filterOption" ng-change="setFilterOption();">
							    	<span>All Clusters / Stacks</span>
							<br/>
						   <input type="radio" name="filterOption" value="standalones" ng-model="filterOption" ng-change="setFilterOption();">
							    	<span>All Standalones</span>
							<hr />
		        		    <a ng-click="clearFilter();" href="javascript:void(0);" >Clear Filter</a>
                               
                             
                                </body>                               
                               
                                </html>
		        		 </form>	        		  	   
	        		</div> 	        		     ...

CSS

.filterNodeDialog{
	display:none;
}

.filterCriteriaContent{ 
  	width:250px;	
	height:auto;					
}

.filterCriteriaContent label{
	font:15px normal Arial;      
}

 .filterCriteriaContent input{
	margin-left: 30px;      
}
 
.filterCriteriaContent a{
	text-decoration:underline;
	text-align:center;
	font: 16px normal Arial;
}

.filterCriteriaContent span{
	font:14px normal Arial;
	margin-left:10px; 	
}

JavaScript

var myapp = angular.module('myApp',[]);
myapp.controller('filterController',['$scope','$compile','$window',function($scope,$compile,$window){
	
$('.filter-node-btn').popover({ 	
			trigger:'click',
		    html : true,
		    placement: 'bottom',
		    content: function() {		    	
                return $compile($(".filterNodeDialog").html())($scope).html();
		    }
		});
    
    $scope.clearFilter = function(){		
		//$('.filter-node-btn').popover('hide');
		$scope.filterOption = "";
		
	}
	
	$scope.setFilterOption = function(){
		 console.log("filter option :",$scope.filterOption);
		 if($scope.filterOption == 'hdnodes'){
			 
		 }else if($scope.filterOption == 'gnodes'){
			 
		 }else if($scope.filterOption == 'clusters'){
			 
		 }else if($scope.filterOption == 'standalones'){
			 
		 }
	}
    
}]);