Angular - Simple Search Page

by brnvndr

HTML

<div ng-controller="searchController">
    <h1>Product Search </h1>
    <div class="searchHeader" ng-class="searchMode">
        
        <input type="Text" ng-model="query" />
        <a href="#" ng-click="toggleSearch('advancedSearch')">Advanced Search</a>
    </div>
    <div class="SearchBody" >
    
       <div class="searchFilters" ng-class="searchMode">
       
         <p>
             <label>Model</label>
             <input type="text" id="modelContains" ng-model="query.modelName" class="includeInput"/>
             <input type="text" id="modelExcludes" ng-model="exclude.modelName" class="excludeInput"/>
         </p>
         <p>
             <label>Name</label>
             <input type="text" id="nameContains" ng-model="query.partNumberName" class="includeInput"/>
             <input type="text" id="nameExcludes" ng-model="exclude.partNumberName" class="excludeInput"/>
         </p>
         <p>
             <label>Part #</label>
             <input type="text" id="partNumberContains" ng-model="query.inventoryPartNumber" class="includeInput"/>
             <input type="text" id="partNumberExcludes" ng-model="exclude.inventoryPartNumber" class="excludeInput"/>
         </p>
         <p>
             <label>MFG #</label>
             <input type="text" id="mfgNumberContains" ng-model="query.manufacturerPartNumber" class="includeInput"/>
             <input type="text" id="mfgNumberExcludes" ng-model="exclude.manufacturerPartNumber" class="excludeInput"/>
         </p>
         <p>
             <label>Status</label>
             <select id="status" ng-model="query.partNumberStatus">
                 <option value="">Any</option>
                 <option ng-repeat="option in partNumberStatusList" value = "{{option}}">{{option}}</option>
             </select>

         </p>
         <p>
             <label>Category</label>
             <select id="category" ng-model="query.modelCategoryName">
                 <option value="">Any</option>
                ...

CSS

.searchFilters {
  float:left;
  
  display: inline-block;
    overflow: hidden;
    width: 0;
    
    /* Doesn't work very well - choppy
    transition: width 1s;
    -webkit-transition: width 1s;        
    -moz-transition: width 1s;        
    -o-transition: width 1s;   
    */
}

.searchFilters.advancedSearch {
  width:250px;
}
.searchFilters.basicSearch {
  width:0px;
}

.searchFilters label {
  text-align:right;
  display:inline-block;
  padding-right:15px;
  width:50px;
}

.searchFilters input {
  width:75px;
  display:inline-block;
}
.searchResults {
  margin-left:250px;
}

.searchResults.advancedSearch {
  margin-left:250px;
}
.searchResults.basicSearch {
  margin-left:0px;
}

.searchHeader {
  height:auto;
}

.searchHeader.advancedSearch {
  height:0px;
  display:none;
}
.searchHeader.basicSearch {
  height:auto;
}

.includeInput {
  background:lightgreen;
}

.excludeInput {
  background:lightsalmon;
}

table {
  color:#333;
  border-collapse:collapse;
  border-spacing:0;
}

td,th {
  border: 1px solid #CCC;
  height:30px;
  padding:3px;
}

th {
  background:#F3F3F3;
  font-weight:bold;
}

tr:nth-child(even) td { background: #F1F1F1; }   
tr:nth-child(odd) td { background: #FEFEFE; } 
tr td:hover { background: #666; color: #FFF; }

JavaScript

var productManagerApp = angular.module('productManagerApp', []);

productManagerApp.factory('lookup',[function(){

	var lookup = {};
  
  lookup.partNumberStatusList = ["Active", "Inactive"];
  lookup.modelCategoryList = ["Bar Tape", "Road Bikes", "Handlebars", "Tires", "Wheels"];

	return lookup;
}]);

productManagerApp.controller('searchController',['$scope','lookup',function($scope, lookup){
		 $scope.searchMode = 'basicSearch';
     $scope.searchResults = models;
     
     $scope.partNumberStatusList = lookup.partNumberStatusList; 
     $scope.modelCategoryList = lookup.modelCategoryList; 
     
     $scope.toggleSearch = function(searchMode) {
         $scope.searchMode = searchMode;
         $scope.query = '';
         $scope.exclude = '';
     }
}]);



var models = 
[
{modelID:10000, 
 partNumberID:15000,
 modelName:"Gel Cork Tape",
 partNumberName:"Carrera Blue",
 inventoryPartNumber:"17007",
 manufacturerPartNumber:"501538",
 partNumberStatus:"Active",
 modelCategoryName:"Bar Tape",
 partNumberListPrice:19.99},
{modelID:10001, 
 partNumberID:15001,
 modelName:"Gel Cork Tape",
 partNumberName:"Lymon",
 inventoryPartNumber:"17008",
 manufacturerPartNumber:"501538",
 partNumberStatus:"Active",
 modelCategoryName:"Bar Tape",
 partNumberListPrice:19.99},
{modelID:10002, 
 partNumberID:15002,
 modelName:"Gel Cork Tape",
 partNumberName:"Grape",
 inventoryPartNumber:"17009",
 manufacturerPartNumber:"501539",
 partNumberStatus:"Active",
 modelCategoryName:"Bar Tape",
 partNumberListPrice:19.99},
{modelID:10003, 
 partNumberID:15003,
 modelName:"Gel Cork Tape",
 partNumberName:"Brown",
 inventoryPartNumber:"17010",
 manufacturerPartNumber:"501541",
 partNumberStatus:"Active",
 modelCategoryName:"Bar Tape",
 partNumberListPrice:19.99},
{modelID:10004, 
 partNumberID:15004,
 modelName:"Gel Cork Tape",
 partNumberName:"Green",
 inventoryPartNumber:"17011",
 manufacturerPartNumber:"501542",
 partNumberStatus:"Active",
 modelCategoryName:"Bar Tape",
...