Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
Hello, {{name}}!<br/>
Here are the users in your database:<br/>
{{data}}!
<p>These links should update the Current ID value:</p>
<table>
<tr ng-repeat="user in data" blarg="{{user.id}}">
<td><a href="#{{user.id}}" ng-click="currentid = user.id">{{user.userName}}</a></td>
<td>{{user.email}}</td>
</tr>
</table>
<p>Current ID is {{currentid}}<br/>
(In the actual app, I would run another database query with the Current ID value, to retrieve more data about the selected user.)
</p>
</div>
CSS
table {
margin: 10px;
}
JavaScript
var myApp = angular.module('myApp', []);
myApp.factory('myService', function() {
// Simulate a database call
return [
{userName: 'admin', email: '[email protected]', id: 1},
{userName: 'rmunn', email: '[email protected]', id: 2},
];
});
//myApp.directive('myDirective', function($scope) {});
myApp.controller('MyCtrl', function ($scope, myService) {
$scope.name = 'Superhero';
$scope.data = myService;
});