Angular Test
HTML
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<head>
<title>Angular Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.js"></script>
<script src="http://code.angularjs.org/angular-0.9.19.min.js" ng:autobind></script>
<script>
function PhoneListCtrl() {
this.phones = [{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM with Wi-Fi",
"snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM",
"snippet": "The Next, Next Generation tablet."}];
this.showSnippet = function(phone) {
alert(phone.snippet);
}
}
</script>
<script src="angular/controllers.js"></script>
</head>
<body ng:controller="PhoneListCtrl">
<div data-role="page" id="home">
<div data-role="header">
<h1>Angular Test</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="query">Fulltext Search</label>
<input id="query" name="query"/>
</div>
<br/>
<ul data-role="listview">
<li ng:repeat="phone in phones.$filter(query)">
<a ng:click="showSnippet(phone);">
{{phone.name}}
</a>
<a ng:click="phones.$remove(phone)">
</a>
</li>
</ul>
<br/>
<div data-role="fieldcontain">
<label for="phone">New Phone</label>
<input id="phone" name="phone"/>
</div>
<br/>
<a data-role="button" aria-label="fuzz" title="fizz"...