<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Egghead Videos</title>
<link rel="stylesheet" href="./topcoat-desktop-light.min.css">
<link rel="stylesheet" href="./bootstrap-theme.min.css">
<link rel="stylesheet" href="./bootstrap.min.css">
<script type="text/javascript" src="./angular.min.js"></script>
<script type="text/javascript" src="./angular-animate.min.js"></script>
<script type="text/javascript" src="./app.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js"></script>
</head>
<body ng-app="app" ng-controller="AppCtrl">
<form>
<input type="text" ng-model="copyContact.firstName" />
<button ng-click="saveContact()">Save</button>
</form>
<div class="div" style="margin-top: 40px;"></div>
<table class="table table-striped">
<thead>
<tr>
<td>First</td>
<td>Last</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts" ng-click="selectContact(contact)">
<td>{{contact.firstName}}</td>
<td>{{contact.lastName}}</td>
<td>{{contact.phone}}</td>
</tr>
</tbody>
</table>
</body>
</html>
var app = angular.module("app", []);
app.factory('Contacts',function($http){
return{
fetchContacts: function(callback){$http.get('./contacts.json').success(callback)}
}
})
app.controller('AppCtrl', function($scope, Contacts){
$scope.selectedContact = null;
$scope.copyContact = null;
Contacts.fetchContacts(function(Contacts){
$scope.contacts = Contacts;
});
$scope.selectContact = function(contact){
$scope.selectedContact = contact;
$scope.copyContact = angular.copy($scope.selectedContact);
}
$scope.saveContact = function(){
$scope.selectedContact.firstName = $scope.copyContact.firstName;
}
});
浙公网安备 33010602011771号