navbar search bootstrap

by Alaksandar Jesus Gene

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script type="text/ng-template" id="home">
    <h1 ui-sref="home"> Home </h1>
    <h1 ui-sref="orders"> Orders </h1>
</script>

<script type="text/ng-template" id="orders">
     <table class="table table-border table-striped" ng-controller="tableController">
       
       <tr>
           <th>Customer Name </th>
            <th>Order Type</th>
            <th>No. of Orders </th>
            <th>Order Date</th>
            <th>Status</th>
       </tr>
       
       <tr ng-repeat="Order in Orders |filter:searchText">
           <td>{{Order.custname}}</td>
           <td>{{Order.ordertype}}</td>
           <td>{{Order.noorder}}</td>
           <td>{{Order.orderdate}}</td>
           <td>{{Order.orderstatus}}</td>
       </tr>
       
     </table>
</script>

<nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
      ...

CSS

body{
    
    padding-top:150px;
}

JavaScript

myApp = angular.module("myApp",["ui.router"]);

myApp.config(function($stateProvider, $urlRouterProvider) {
  //
  // For any unmatched url, redirect to /state1
  $urlRouterProvider.otherwise("/home");
  //
  // Now set up the states
  $stateProvider
    .state('home', {
      url: "/home",
      templateUrl: "home"
    })
   .state('orders', {
      url: "/orders",
      templateUrl: "orders"
    })
});

myApp.controller("tableController",function($rootScope,$scope){

    $scope.Orders =[
    
        {
            "custname":"Alpha",
            "ordertype":"xxxx",
            "noorder":"12",
            "orderdate":"esdf",
            "orderstatus":"completed"
        
        },
          {
            "custname":"Beta",
            "ordertype":"xxxx",
            "noorder":"12",
            "orderdate":"esdf",
            "orderstatus":"processing"
        
        },
          {
            "custname":"Gamma",
            "ordertype":"xxxx",
            "noorder":"12",
            "orderdate":"esdf",
            "orderstatus":"pending"
        
        }
    
    
    ]
    
    
    


})