Search

by Rob Rothe

HTML

<div ng-app="app">
   <div class="container" ng-controller="SearchSubmissionsCtrl as ctrl">
      <form ng-submit="ctrl.search()">
         <input type="text" ng-model="ctrl.searchString" placeholder="Search...">
         <button type="submit">
            Search
         </button>
      </form>
   </div>
   <div class="container" ng-controller="SubmissionsCtrl as ctrl">
      <p>
         Search String: {{ctrl.searchString}}
      </p>
      <ul class="subsList">
         <ul>
            <li ng-repeat="item in ctrl.items | filter: ctrl.searchString" class="submissionDivider hover">
               <span class="ageText">{{item.age}}</span>
               <span class="submissionsText">{{item.submission}}</span>
               <span class="descriptionText">{{item.description}}</span>
            </li>
         </ul>
      </ul>
   </div>
</div>

JavaScript

angular
   .module('app', [])
   .controller('SearchSubmissionsCtrl', SearchSubmissionsCtrl)
   .controller('SubmissionsCtrl', SubmissionsCtrl)
   .factory('Service',Service);

function SearchSubmissionsCtrl($rootScope,Service) {
   var vm = this;
   vm.searchString = Service.searchString;
   vm.search = search;

   function search() {
   	Service.searchString = vm.searchString;
      $rootScope.$broadcast('search', vm.searchString);
   }
}

function SubmissionsCtrl($scope,Service) {
   var vm = this;
   vm.searchString = Service.searchString;
   vm.items = [{
      age: 22,
      submission: 'Yes',
      description: 'Yo'
   }, {
      age: 5,
      submission: 'Derp',
      description: 'Hey'
   }];

   $scope.$on('search', function(e, string) {
      vm.searchString = string;
   })
}

function Service() {
	var service = {
   	searchString: null
   };
   
   return service;
}