-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
47 lines (47 loc) · 2.38 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
<html>
<head>
<title>AngularJS Shopping List</title>
<link href='http://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div ng-app="listApp">
<div ng-controller="ListCtrl" class="lstWrap radius">
<section class="pusher">
<p>
<input id="input_name" type="text" class="radius" ng-keyup="addOnReturn($event)" placeholder="I want..." />
</p>
<p class="addButton" ng-click="add()" title="Add to list">
<i class="fa fa-pencil fa-2"></i>
</p>
<p class="addButton" ng-click="empty()" title="Empty list">
<i class="fa fa-trash fa-2"></i>
</p>
</section>
<section class="list" ng-show="list.length > 0">
<div ng-repeat="element in list track by $index">
<div class="checkWrap">
<div class="checkbox" ng-show="!element.purchased" ng-click="addToCart(element)" title="Add to cart">
<i class="fa fa-square-o"></i>
</div>
<div class="checkbox" ng-show="element.purchased" ng-click="removeFromCart(element)" title="Remove from cart">
<i class="fa fa-check-square-o"></i>
</div>
</div>
<div class="elemContainer" ng-mouseenter="element.showremove=true" ng-mouseleave="element.showremove=false">
<div class="elemWrap">
<span>{{ element.name }}</span>
<div ng-show="element.purchased" class="lineThrough"></div>
</div>
<div class="elemRemove" ng-show="element.showremove" ng-click="remove(element)" title="Remove from list"><i class="fa fa-times fa-2"></i></div>
</div>
</div>
</section>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>