Search

by Rob Rothe

HTML

<div ng-app="app">
   <div class="container" ng-controller="SubmissionsCtrl as ctrl">
      <form ng-submit="ctrl.search()">
         <input type="text" ng-model="ctrl.searchString" placeholder="Search..." ng-blur="ctrl.saveSearchString()">
         <button type="submit">
            Search
         </button>
      </form>
      <hr>
      <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('SubmissionsCtrl', SubmissionsCtrl)
   .factory('Service', Service);


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

   function saveSearchString() {
      Service.searchString = vm.searchString;
      alert('Saved!');
   }
}

function Service() {
   var service = {
      searchString: 'Derp'
   };

   return service;
}