karkranikhil · July 21, 2015 12:39
diff --git a/dynamictable withsearching b/dynamictable withsearching
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Search</title>
 <link rel="stylesheet" href="bootstrap.min.css">
 <script src="angular.min.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
 <script src="bootstrap.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){ 
    $("#myTab a").click(function(e){
    	e.preventDefault();
    	$(this).tab('show');
    });
 });
 </script>

 </head>
 <body ng-app="myApp" ng-controller="userCtrl">
 <div class="container">
 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <a class="navbar-brand" href="#">
                    <img src="infylogo.png" style="  margin-top: -15px;" alt="">
                </a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" ng-init="firstName='Sushma'">
                <ul class="nav navbar-nav">
                   
 					  <li>
                        <a href="#" style="padding-left: 1000px;">Welcome {{firstName}}</a>
                    </li>
 					 <li>
                        <a href="#">Logout</a>
                    </li>
            </div>
            <!-- /.navbar-collapse -->
     
        
    </nav>
    <ul class="nav nav-pills" id="myTab" style="margin-top: 50px;">
        <li><a href="#sectionA">Home</a></li>
        <li><a href="#sectionB">User Profile</a></li>
 		<li  class="active"><a href="#sectionc">Search</a></li>
 		<li><a href="#sectiond">History</a></li>
 		<li><a href="#sectione">Graph</a></li>
    </ul>
    <div class="tab-content">
        <div id="sectionA" class="tab-pane fade">
            <h3>Home</h3>
            <p>Welcome to Home page .</p>
        </div>
        <div id="sectionB" class="tab-pane fade">
            <h3>User Profile</h3>
            <p>Welcome to User Profile Page. </p>
        </div>
 		<div id="sectionc" class="tab-pane fade in active" >
            <h3>Search</h3>
 			<p>Welcome to Search Page.</p>
 			
 			<div class="input-group">
 <input type="text" ng-model="option" ><button type="button" ng-Click="findValue(option)">Search</button>
 </div>
 <table class="table table-striped" ng-hide="myVar">
  <thead><tr>   
        <th>ID</th>
        <th>Description</th>
        <th>Category</th>
 		<th>Unit</th>
  </tr></thead>
  <tbody><tr ng-repeat="arr in arrs">
    <td>{{ arr.Id }}</td>
    <td>{{ arr.Description }}</td>
 	 <td>{{ arr.Category }}</td>
 	  <td>{{ arr.Unit }}</td>
  </tr></tbody>
 </table>
        </div>
 		<div id="sectiond" class="tab-pane fade">
            <h3>History</h3>
            <p>Welcome to History.</p>
        </div>
 		<div id="sectione" class="tab-pane fade">
            <h3>Graph</h3>
            <p>Welcome to Graph.</p>
        </div>
       
    </div>
 </div>
 <script>
 var app=angular.module('myApp', []).controller('userCtrl', function($scope) {
 $scope.Users = {};
 Users=[
 {
 "Id" : "001",
 "Description" : "System Engg",
 "Category" : "SE",
 "Unit":"DISDCX"
 },
 {
 "Id" : "002",
 "Description" : "Senior System Engg",
 "Category" : "SSE",
 "Unit":"MOBL"
 },
 {
 "Id" : "003",
 "Description" : "Technology Analyst",
 "Category" : "TA",
 "Unit":"IVS"
 },
 {
 "Id" : "004",
 "Description" : "Technology Lead",
 "Category" : "TL",
 "Unit":"FSDM"
 },
 {
 "Id" : "005",
 "Description" : "System Engg",
 "Category" : "SE",
 "Unit":"DISDCX"
 },
 {
 "Id" : "006",
 "Description" : "System Engg",
 "Category" : "SE",
 "Unit":"DISDCX"
 }
 ];
 $scope.myVar = true;
 
 $scope.arrs= '';
  $scope.findValue = function(option) {
    $scope.myVar = false;
 var arr = [];  
   for(var i = 0; i < Users.length ; i++) {
 				if(angular.equals(option,Users[i].Category)){
 					arr[arr.length] = Users[i];
 				}
 				else if(angular.equals(option,Users[i].Unit)){
 					arr[arr.length] = Users[i];
 				}
 				else if(angular.equals(option,Users[i].Description)){
 					arr[arr.length] = Users[i];
 				}
 				else if(angular.equals(option,Users[i].Id)){
 					arr[arr.length] = Users[i];
 				}
 			}
 			$scope.arrs = arr;
  };
 app.controller('nameCtrl', function($scope) {
 $scope.name="Sushma";
 });


 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Search</title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<script src="angular.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="bootstrap.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
	$("#myTab a").click(function(e){
	e.preventDefault();
	$(this).tab('show');
	});
	});
	</script>

	</head>
	<body ng-app="myApp" ng-controller="userCtrl">
	<div class="container">
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
	<!-- Brand and toggle get grouped for better mobile display -->
	<div class="navbar-header">
	<a class="navbar-brand" href="#">
	<img src="infylogo.png" style=" margin-top: -15px;" alt="">
	</a>
	</div>
	<!-- Collect the nav links, forms, and other content for toggling -->
	<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" ng-init="firstName='Sushma'">
	<ul class="nav navbar-nav">

	<li>
	<a href="#" style="padding-left: 1000px;">Welcome {{firstName}}</a>
	</li>
	<li>
	<a href="#">Logout</a>
	</li>
	</div>
	<!-- /.navbar-collapse -->


	</nav>
	<ul class="nav nav-pills" id="myTab" style="margin-top: 50px;">
	<li><a href="#sectionA">Home</a></li>
	<li><a href="#sectionB">User Profile</a></li>
	<li class="active"><a href="#sectionc">Search</a></li>
	<li><a href="#sectiond">History</a></li>
	<li><a href="#sectione">Graph</a></li>
	</ul>
	<div class="tab-content">
	<div id="sectionA" class="tab-pane fade">
	<h3>Home</h3>
	<p>Welcome to Home page .</p>
	</div>
	<div id="sectionB" class="tab-pane fade">
	<h3>User Profile</h3>
	<p>Welcome to User Profile Page. </p>
	</div>
	<div id="sectionc" class="tab-pane fade in active" >
	<h3>Search</h3>
	<p>Welcome to Search Page.</p>

	<div class="input-group">
	<input type="text" ng-model="option" ><button type="button" ng-Click="findValue(option)">Search</button>
	</div>
	<table class="table table-striped" ng-hide="myVar">
	<thead><tr>
	<th>ID</th>
	<th>Description</th>
	<th>Category</th>
	<th>Unit</th>
	</tr></thead>
	<tbody><tr ng-repeat="arr in arrs">
	<td>{{ arr.Id }}</td>
	<td>{{ arr.Description }}</td>
	<td>{{ arr.Category }}</td>
	<td>{{ arr.Unit }}</td>
	</tr></tbody>
	</table>
	</div>
	<div id="sectiond" class="tab-pane fade">
	<h3>History</h3>
	<p>Welcome to History.</p>
	</div>
	<div id="sectione" class="tab-pane fade">
	<h3>Graph</h3>
	<p>Welcome to Graph.</p>
	</div>

	</div>
	</div>
	<script>
	var app=angular.module('myApp', []).controller('userCtrl', function($scope) {
	$scope.Users = {};
	Users=[
	{
	"Id" : "001",
	"Description" : "System Engg",
	"Category" : "SE",
	"Unit":"DISDCX"
	},
	{
	"Id" : "002",
	"Description" : "Senior System Engg",
	"Category" : "SSE",
	"Unit":"MOBL"
	},
	{
	"Id" : "003",
	"Description" : "Technology Analyst",
	"Category" : "TA",
	"Unit":"IVS"
	},
	{
	"Id" : "004",
	"Description" : "Technology Lead",
	"Category" : "TL",
	"Unit":"FSDM"
	},
	{
	"Id" : "005",
	"Description" : "System Engg",
	"Category" : "SE",
	"Unit":"DISDCX"
	},
	{
	"Id" : "006",
	"Description" : "System Engg",
	"Category" : "SE",
	"Unit":"DISDCX"
	}
	];
	$scope.myVar = true;

	$scope.arrs= '';
	$scope.findValue = function(option) {
	$scope.myVar = false;
	var arr = [];
	for(var i = 0; i < Users.length ; i++) {
	if(angular.equals(option,Users[i].Category)){
	arr[arr.length] = Users[i];
	}
	else if(angular.equals(option,Users[i].Unit)){
	arr[arr.length] = Users[i];
	}
	else if(angular.equals(option,Users[i].Description)){
	arr[arr.length] = Users[i];
	}
	else if(angular.equals(option,Users[i].Id)){
	arr[arr.length] = Users[i];
	}
	}
	$scope.arrs = arr;
	};
	app.controller('nameCtrl', function($scope) {
	$scope.name="Sushma";
	});


	});
	</script>
	</body>
	</html>
No results found