AngularJS Example

by leighboone

HTML

<div ng-app="">
  <div ng-init="friends = [{
		  	     		id:"accces",
		  	     		name:"508",
		  	     		sort:1,
		  	     		question:"Does your product need to be 508 compliant?",
		  	     		EPUB:"yes",
		  	     		PDF:"yes",
		  	     		Replica:"no",
		  	     		App:"no",
		  	     		HTML5:"yes",
		  	     		checked:false
		  	     	},
		  	     	{
		  	     		id:"reflow",
		  	     		name:"Reflowable Text",
		  	     		sort:2,
		  	     		question:"Does your need to have reflowable text?",
		  	     		EPUB:"yes",
		  	     		PDF:"yes",
		  	     		Replica:"partially",
		  	     		App:"no",
		  	     		HTML5:"yes",
		  	     		checked:false
		  	     	},
		  	     	{
		  	     		id:"audio",
		  	     		name:"Audio",
		  	     		sort:3,
		  	     		question:"Does your product use audio files?",
		  	     		EPUB:"yes",
		  	     		PDF:"yes",
		  	     		Replica:"yes",
		  	     		App:"yes",
		  	     		HTML5:"yes",
		  	     		checked:false
		  	     	},
		  	     	{
		  	     		id:"video",
		  	     		name:"Video",
		  	     		sort:4,
		  	     		question:"Does your product use video files?",
		  	     		EPUB:"partially",
		  	     		PDF:"yes",
		  	     		Replica:"yes",
		  	     		App:"yes",
		  	     		HTML5:"yes",
		  	     		checked:false
		  	     	},
		  	     	{
		  	     		id:"markers",
		  	     		name:"Video Markers",
		  	     		question:"Does your product use video markers or links to specific time frames?",
		  	     		sort:5,
		  	     		EPUB:"no",
		  	     		PDF:"yes",
		  	     		Replica:"no",
		  	     		App:"no",
		  	     		HTML5:"yes",
		  	     		checked:false
		  	     	}]"></div>
  
  Search: <input ng-model="searchText">
  <table id="searchTextResults">
    <tr><th>Name</th><th>Phone</th></tr>
    <tr ng-repeat="friend in friends | filter:searchText">
      <td>{{friend.name}}</td>
      <td>{{friend.phone}}</td>
    </tr>
  </table>
  <hr>
  Any: <input ng-model="search.$"> <br>
  Name only <input ng-model="search.name"><br>
  Phone...

CSS

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