JSFiddle - React, Tailwind, and code Playground

by gangadharjannu

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container main-form" ng-app="searchApp">
  <div class="row" ng-controller="SearchScope as scope">
    <div class="col-md-2">
      <ul class="nav nav-pills nav-stacked">
        <li ng-repeat="item in scopes" ng-class="{'active': isScopeActive({{$index}})}"><a href="" ng-click="changeScope($index)">{{item}}</a></li>
      </ul>
    </div>
    <div class="col-md-10">
      <div id="form0" ng-show="isScopeActive(0)" ng-controller="SingleIPController as sip">

      </div>
      <div id="form1" ng-show="isScopeActive(1)" ng-controller="BulkIPController as bip">
        <form class="form-horizontal panel panel-default form-panel" ng-show="searchEnabled">
          <div class="form-group">
            <label for="subnet" class="col-sm-2 control-label">Subnet</label>
            <div class="col-sm-4">
              <select class="form-control" id="subnet" ng-model="selectedSubnet" ng-options="x as y for (x, y) in trackedSubnets">
                    <option value="">Select Option</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="occtype" class="col-sm-2 control-label">Type</label>
            <div class="col-sm-4">
              <select class="form-control" id="occtype" ng-model="selectedType" ng-options="x as y for (x, y) in ipOccupancy">
                <option value="">Select Option</option>
              </select>
            </div>
          </div>
          <div class="form-group">
            <label for="team" class="col-sm-2 control-label">Team</label>
            <div class="col-sm-4">
             ...

JavaScript

(function() {
  var app = angular.module("searchApp", []);

  app.factory('SubnetFact', function() {
    return {
      "Select": "Select",
      "10.78.90": "10.78.90",
      "10.78.91": "10.78.91",
      "10.78.92": "10.78.92",
      "10.78.93": "10.78.93",
      "10.78.94": "10.78.94",
      "10.78.95": "10.78.95",
      "10.107.45": "10.107.45"
    };
  });

  app.factory('OccupFact', function() {
    return {
      "All IPK": "All IP",
      "Free IPK": "Free IP",
      "Used IPK": "Used IP"
    };
  });

  app.factory('TeamFact', function() {
    return {
      "ALL": "All",
      "Team A": "Team A",
      "Team B": "Team B",
      "Team C": "Team C",
      "Team D": "Team D"
    };
  });

  app.factory('MachineTypeFact', function() {
    return {
      "ALL": "ALL Servers and Devices",
      "A": "A",
      "B": "B",
      "C": "C",
      "D": "D"
    };
  });

  app.controller("SearchScope", function($scope) {
    $scope.activeScope = 1;
    $scope.scopes = ['Individual IP Data', 'All IP Data'];

    $scope.isScopeActive = function(num) {
      return num === $scope.activeScope;
    };

    $scope.changeScope = function(index) {
      $scope.activeScope = index;
    };
  });

  app.controller("SingleIPController", function($rootScope, $scope, $http) {

  });

  app.controller("BulkIPController", function($rootScope, $scope, $http, SubnetFact, OccupFact, TeamFact, MachineTypeFact) {
    $scope.trackedSubnets = SubnetFact;
    $scope.ipOccupancy = OccupFact;
    $scope.teams = TeamFact;
    $scope.machineType = MachineTypeFact;
debugger;
    $scope.selectedSubnet = $scope.trackedSubnets["Select"];
    $scope.selectedType = $scope.ipOccupancy["All IPK"];
    $scope.selectedTeam = $scope.teams["ALL"];
    $scope.selectedMachineType = $scope.machineType["ALL"];

    $scope.bulkIPData = null;

    $scope.WIP = false;
    $scope.searchEnabled = true;

    $scope.enableSearch = function() {
      $scope.searchEnabled = true;
    };
  });
})();