-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (88 loc) · 4.09 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<html>
<head>
<style>
label {
display: block;
}
</style>
</head>
<body ng-app="masterDetailApp" style="margin:10px">
<script src="bower_components/angular/angular.js"></script>
<script src="src/namedError.js"></script>
<script src="src/eventable.js"></script>
<script src="src/store.js"></script>
<script src="src/httpStore.js"></script>
<script src="src/ArrayStore.js"></script>
<script src="src/data.js"></script>
<script src="src/itemCollection.js"></script>
<script>
angular.module('masterDetailApp', [
'atsid.data',
'atsid.data.itemCollection'
]).config(["dataSourceProvider", function (dataSourceProvider) {
dataSourceProvider.setStoreUrl("api");
dataSourceProvider.addRoutes({
contacts: {
path: "contacts/:contactId",
},
addresses: {
path: "contacts/:contactId/addresses/:addressId",
fields: "sup"
}
});
}])
.controller('MasterCtrl', ['$scope', 'dataSource', "itemCollection", function ($scope, dataSource, itemCollection) {
$scope.contacts = itemCollection({
saveChildren: true,
dataSource: dataSource("contacts")
});
$scope.contacts.on("didSelectItem", function (e, contact) {
$scope.selectedContact = contact;
if (contact) {
contact.child("addresses").query().then(function (addresses) {
$scope.addresses = addresses;
});
}
});
}]);
</script>
<div style="width:800px" ng-controller="MasterCtrl">
<div style="float:left; margin: 0px 20px; padding: 0px; width: 200px">
<ul style="padding: 0; margin: 0">
<li style="text-align:right">
<button ng-click="contacts.createItem({}, true);">New Contact</button>
</li>
<li ng-repeat="contact in contacts.getAll()">
<a ng-click="contact.select();">{{ contact.name }}</a>
</li>
</ul>
</div>
<div ng-switch="!!selectedContact" style="margin-left:296px">
<form class='span8' name="form" ng-switch-when="true">
<div style="text-align:right">
<button ng-disabled="!form.$valid" ng-click="selectedContact.remove();">Delete Contact</button>
<button ng-disabled="!form.$valid" ng-click="selectedContact.save();">Save Contact</button>
</div>
<label>Name * <input type="text" ng-model="selectedContact.name" required></label>
<label>Phone Number <input type="text" ng-model="selectedContact.phoneNumber"></label>
<hr>
<div style="text-align:right">
<button ng-disabled="!form.$valid" ng-click="addresses.addItem({});">Add Address</button>
</div>
<div ng-repeat="address in addresses.items" style="margin-bottom:20px">
<div>
<button ng-click="address.remove()">Delete</button>
</div>
<label>Street <input type="text" ng-model="address.street"></label>
<label>City <input type="text" ng-model="address.city"></label>
<label>State <input type="text" ng-model="address.state"></label>
<label>Country <input type="text" ng-model="address.country"></label>
</div>
</form>
<div ng-switch-default>
Select an item in the list.
</div>
</div>
</div>
</body>
</html>