Angular JS Search Demo

<!DOCTYPE html>
<html ng-app="myapp">

  <head>
    <link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
    <script data-require="angular.js@1.2.4" data-semver="1.2.4" src="https://code.angularjs.org/1.2.4/angular.js"></script>
    <script data-require="ui-router@0.0.2" data-semver="0.0.2" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js"></script>
  </head>

  <body>
        <div class="well" ui-view></div>
  </body>

</html>

var myapp = angular.module('myapp',["ui.router"])

myapp.config(function($stateProvider,$urlRouterProvider){
    
    $stateProvider
       
       .state('products',{
           abstract: true,
           url:'/products',
           templateUrl: 'products.html',
           controller : 'LoadproductsCtrl'
        })
       
       .state('products.list',{
           url:'/list',
           views:{
                "viewList": { 
                     templateUrl: 'products.list.html',
                     controller : 'SearchCtrl'  
                },
                "viewFilter": { 
                  controller: 'FilterCtrl',
                  templateUrl: 'filters.list.html',
                },
                "viewC": {
                    controller: 'HeaderCtrl',
                    templateUrl: 'searchparam.list.html'
                }
           }
       })
       
       .state('products.detail',{
           url:'/detail/:id',
           views:{
                "viewList": { 
                     templateUrl: 'products.detail.html',
                     controller: 'ProductdetailCtrl'  
                }
           }
       })
    
    $urlRouterProvider.when("","/products/list");
    $urlRouterProvider.when("/","/products/list");

});

/*myapp.filter('myfilter', function() {
   
   return function(items, types) {
       var filtered = [];
    
       angular.forEach(items, function(item) {
         if(types.Adidas === false && types.Puma === false && types.Nike === false && types.Reebok === false) {
            filtered.push(item);
          }
          else if(types.Adidas === true && item.brand === 'Adidas'){
            filtered.push(item);
          }
          else if(types.Puma === true && item.brand === 'Puma'){
            filtered.push(item);
          }
          else if(types.Nike === true && item.brand === 'Nike'){
            filtered.push(item);
          }
          else if(types.Reebok === true && item.brand === 'Reebok'){
            filtered.push(item);
          }
      });
  
    return filtered;
  };
});*/

myapp.factory('uiFieldState', function () {
  return {
      uiObject: {data: null} ,
      product : {},
      productCollection: {list:[]},
      filteredCollection: {list:[]},
      filterList: [],
      queryFilter: []
  }
});

myapp.controller('LoadproductsCtrl',function($scope,$http,uiFieldState,$filter){
       $http.get('items.json').success(function(data){
          uiFieldState.productCollection.list = data;
          uiFieldState.filteredCollection.list = data
       });
});

myapp.controller('FilterCtrl', ['$scope', 'uiFieldState', '$stateParams', '$state', function($scope, uiFieldState, $stateParams, $state) {
    
        //Initialization
        $scope.brands = ['Adidas', 'Puma', 'Nike', 'Reebok'];
        $scope.selection = uiFieldState.filterList;
        $scope.query = uiFieldState.queryFilter;
        
        // toggle selection for a given brand by name
        $scope.toggleSelection = function toggleSelection(brandName) {
          var idx = $scope.selection.indexOf(brandName);
          // is currently selected
          if (idx > -1) {
            $scope.selection.splice(idx, 1);
          }
          // is newly selected
          else {
            $scope.selection.push(brandName);
          }
          $scope.selection = uiFieldState.filterList;
          
          uiFieldState.filteredCollection.list = [];
          angular.forEach(uiFieldState.productCollection.list,function(item,index){
              angular.forEach(uiFieldState.filterList,function(filter,index){
                if(item.brand == filter){
                  uiFieldState.filteredCollection.list.push(item);
                }
              });
          });
          
          if(uiFieldState.filterList.length === 0 && uiFieldState.filteredCollection.list.length === 0 ){
               uiFieldState.filteredCollection.list =  uiFieldState.productCollection.list;      
          }
        }
        $scope.brandtypes = {adidas: false, puma:false};
}
]);



myapp.controller('HeaderCtrl', ['$scope', 'uiFieldState', '$stateParams', '$state', function($scope, uiFieldState, $stateParams, $state) {
       /*$scope.selected = uiFieldState.uiObject;*/
       $scope.filteredBrands = uiFieldState.filterList;
       
  }
]);

myapp.controller('ProductdetailCtrl',['$scope','$stateParams','uiFieldState',function($scope,$stateParams,uiFieldState){
         
        $scope.init = function(){
          console.log($stateParams.id); 
           angular.forEach(uiFieldState.productCollection.list,function(product){
                 if(product.id == $stateParams.id){
                   $scope.productdetail = product;
                 }
           });
        }; 
}]);

myapp.controller('SearchCtrl',['$state','$scope','uiFieldState','$filter', function($state,$scope,uiFieldState,$filter){
        console.log(uiFieldState.filteredProductList);
        $scope.productCollection = uiFieldState.filteredCollection;
        $scope.criteriaFilter = uiFieldState.queryFilter
        $scope.types = uiFieldState.filterList;   
}]);

/* Styles go here */

[
   { "id": 0,
     "name": "Ryzo 2.0 M Running",
    "description": "adidas Ryzo 2.0 M Running Shoes",
    "brand":"Adidas",
    "price": 2089,
    "supplier":  [{
      "name": "WS Retail",
      "description": "Online Adidas Platform!",
      "active": true,
      "address": "Mars"
    }],
    "available": true,
    "itemcount": 6
   },
   { "id": 1,
     "name": "Hachi M Running",
    "description": "adidas Hachi M Running Shoes",
    "brand":"Puma",
    "price": 1979,
    "supplier":  [{
      "name": "WS Retail",
      "description": "Online Adidas Platform!",
      "active": true,
      "address": "Sydney"
    }],
    "available": true,
    "itemcount": 7
   },
   { "id": 2,
     "name": "Ryzo M Running Shoes",
    "description": "adidas Ryzo M Running Shoes",
    "brand":"Adidas",
    "price": 3799,
    "supplier":  [{
      "name": "Filipino Central",
      "description": "Online Adidas Platform!",
      "active": true,
      "address": "Cebu"
    }],
    "available": true,
    "itemcount": 8
   },
   { "id": 4,
     "name": "Ermi M Running Shoes",
    "description": "adidas Ermi M Running Shoes",
    "brand":"Nike",
    "price": 1099,
    "supplier":  [{
      "name": "Science Central",
      "description": "Online Adidas Platform!!",
      "active": true,
      "address": "Indonesia"
    }],
    "available": true,
    "itemcount": 9
   },
   { "id": 5,
     "name": "Ignitor Hiking Running Shoes",
    "description": "adidas Ignitor Hiking Running Shoes",
    "brand":"Reebok",
    "price": 4099,
    "supplier":  [{
      "name": "Cooking Central",
      "description": "Online Adidas Platform!!",
      "active": true,
      "address": "China"
    }],
    "available": true,
    "itemcount": 10
   }
]

<!-- products.html -->
<h1>Products</h1>

<div class="row">
    <!--Selected Filter-->
    <div class="span12">
       <div class="well" ui-view="viewC"></div>  
    </div>
    <!--Products Filter View -->
    <div class="span12">
      <div class="well" ui-view="viewFilter"></div>
    </div>
    <!--Products Detail View-->
    <div class="span12">
      <div class="well" ui-view="viewList"></div>
    </div>
</div>

<b>Please select your criteria : </b>
<label>search: </label>
<input ng-model="query" placeholder="Search for Items" autofocus>


<table class="table table-hover" ng-init="init()">
      <tr class="row" ng-repeat="product in productCollection.list|filter : query">
        <td>
          <a href="#/products/detail/{{product.id}}">{{product.name}}</a>
          <!--<b><p>{{product.name}}</p></b>-->
          <p>{{product.description}}</p>
        </td>
        <td>
          <p>{{product.brand}}</p>
        </td>
        <td>
          <p>{{product.supplier[0].name}}</p>
        </td>
        <td>
          <p>${{product.price}}</p>
        </td>
        <td>
          <p>{{product.itemcount}} Items Left</p>
        </td>
      </tr>
  </table>
  
  {{types|json}}
  
  {{criteriaFilter}}

<h2 ng-init="init()">{{productdetail.name}}</h2>
<ul class="nav">
  <!--<li><a href="#/products/list">Go Back to List</a></li>-->
  <li><a href="#/products/list">Go Back to List</a></li>
</ul>

<!--<input type="checkbox" ng-model="selected2.data" />
<pre>selected2.data: {{selected2.data}}</pre>-->

<label ng-repeat="brandName in brands">
  <input type="checkbox"
    name="selectedFruits[]"
    value="{{brandName}}"
    ng-checked="selection.indexOf(brandName) > -1"
    ng-click="toggleSelection(brandName)"
    > 
   {{brandName}}
</label>


{{selection|json}}
{{query.filter}}

<!--<input type="checkbox" ng-model="selected.data" />
<pre>selected.data: {{selected.data}}</pre>-->
<b>Selected Filters</b>
<label ng-repeat="brandName in filteredBrands">
  <input type="checkbox"
    value="{{brandName}}"
    ng-checked="filteredBrands.indexOf(brandName) > -1"
    ng-disabled="true"
  > {{brandName}}
</label>

{{filteredBrands|json}}