AngularJS Example

by bryangrimes

HTML

<div ng-app="">
  <div ng-init="logs= [{name:'bgrimes', hours:10, dept:'app'}, {name:'aallen', hours:18, dept:'ext app'}, {name:'pmolnar', hours:8, dept:'db'}, {name:'dgelling', hours:9, dept:'db'}, {name:'yshevets', hours:5, dept:'ext db'}, {name:'plahm', hours:10, dept:'qa'}, {name:'kingert', hours:20, dept:'pm'}, {name:'jchoi', hours:2, dept:'ext qa'}, {name:'jdennis', hours:10, dept:'app'}, {name:'mpeters', hours:3, dept:'qa'}]">
  
      <ul>
          <li ng-repeat="log in logs">
            {{log.name}} worked {{log.hours}} this week as a(n) {{log.dept}}
          </li>            
      </ul>
      <br><br>
      
  Filter: <input ng-model="search.dept"> <br><br>

  <table id="searchObjResults">
    <tr ng-repeat="log in logs | filter:search">
     <td>{{log.name}}</td><td>|</td><td>{{log.dept}}</td><td>|</td><td>{{log.hours}}</td>
    </tr>
  </table>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style>
.ng-invalid { border: 1px solid red; }