JSFiddle - React, Tailwind, and code Playground

by anoop chandran

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div ng-app="myApp">
<div ng-controller="MyCntrl">
    <div class="modal-header">
        <h3>Registration</h3>
    </div>
    <div class="modal-body" >
         
        <div class="col-md-12">
        <div class="col-md-2">
        <label class="form-label">Name</label>
 <input type="text" ng-model="MyTest.name" name="name" ng-required="true" class="form-control" maxlength="20"/>
        </div>
         <div class="col-md-2">
        <label class="form-label">Address</label>
 <input type="text" ng-model="MyTest.address" name="name" ng-required="true" class="form-control" maxlength="20"/>
        </div>
            
            <div class="col-md-2">
                <label class="form-label">Phone #</label>
                <input type="text" ng-model="MyTest.phoneNo" name="phoneNo"class="form-control" maxlength=10 />
                
            </div>
            
            <div class="col-md-2">
                <label class="form-label">Branch</label>
                <select ng-model="myTest.branch" ng-options="item.id as item.branch for item in MyTest.branch" name="branch" class="form-control"></select>
            </div>
            
            
            
            </div>
        
    </div>
    <div class="modal-footer">
        
    </div>
    
    
    
    
    {{MyTest.test}}
    <div ng-grid="ngGridOptions" class="ngGrid"...

JavaScript

(function() { 
   angular.module("myApp",['ngGrid'])
   .controller("MyCntrl" ,["$scope","$rootScope","$filter", 		     function($scope,$rootScope,$filter){
        $scope.namespace="MyTest";
        $scope[$scope.namespace]={};
        var namespace=$scope[$scope.namespace];
        namespace.test="Dashboard"
       
    
        
        $scope.ngGridOptions=[
            {
        "id":1,
        "country":"America"
        },
 {
           "id":2,
           "country":"india"
         }]
        
       
        
        namespace.branch=[
            {
        "id":1,
        "branch":"CSE"
        
        },
                       {
                         "id":2,
        "branch":"IT"
                       
                       },
          {
                         "id":3,
        "branch":"ECE"
                       
                       },
                         {
                         "id":4,
        "branch":"EEE"
                       
                       },
                       {
                         "id":5,
        "branch":"MECH"
                       
                       }]
        
      
     
  $scope.studentDetails=[
           {
          "id":1,
                "firstName":"Jason",
                 "address":"NewYork",
                 "phoneNo":1234567,
               "branch":1,
                 "gender":1,
               "country":1,
               "isActive":true,
                 "isCheck":1
           },
            {
          "id":4,
                "firstName":"Raja",
                 "address":"Coimbatore",
                 "phoneNo":98674545,
               "branch":2,
                 "gender":1,
               "country":2,
               "isActive":false,
                  "isCheck":0
           },
            {
          "id":3,
                "firstName":"David",
                 "address":"California",
                 "phoneNo":1234565767,
               "branch":3,
                 "gender":1,
...