-
Notifications
You must be signed in to change notification settings - Fork 0
/
jquery.html
63 lines (52 loc) · 1.81 KB
/
jquery.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
<!DOCTYPE html>
<html ng-app="meetup">
<head>
<title>AngularJS - Controllers</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/application.css" rel="stylesheet" media="screen">
</head>
<body>
<ul class="breadcrumb">
<li><a href="index.html">Home</a> <span class="divider">/</span></li>
<li class="active">JQuery vs Angular</li>
</ul>
<div class="well">
<button id="jquery-button" class="btn" data-counter="0">Pushed 0 Times</button>
</div>
<div class="well" ng-controller="ControllerA">
<button ng-class="btnClass" ng-click="push()">Pushed {{counter}} Times</button>
</div>
<div class="well" ng-controller="ControllerB">
<button ng-class="{false: 'btn', true: 'btn btn-danger'}[active]" ng-click="push()">Pushed {{counter}} Times</button>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
$('#jquery-button').click(function() {
var currentCount = $(this).data('counter');
var newCount = currentCount + 1;
$(this).data('counter', newCount);
$(this).toggleClass('btn-danger');
$(this).html('Pushed '+newCount+' Times');
});
var meetup = angular.module('meetup', []);
ControllerA = function($scope) {
$scope.counter = 0;
$scope.btnClass = 'btn';
$scope.push = function() {
$scope.btnClass = ($scope.btnClass == 'btn') ? 'btn btn-danger' : 'btn';
$scope.counter += 1;
}
}
ControllerB = function($scope) {
$scope.counter = 0;
$scope.active = false;
$scope.push = function() {
$scope.active = !$scope.active;
$scope.counter += 1;
}
}
</script>
</body>
</html>