Skip to content

Commit 1afb7c3

Browse files
author
0xAX
committed
initial checkbox added
1 parent b890372 commit 1afb7c3

9 files changed

Lines changed: 172 additions & 14 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Directives
77
----------------------
88

99
* accordion
10+
* checkbox
1011

1112
Building
1213
----------------------

‎src/accordion/docs/controllers.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
var App = angular.module('AccordionApp', ['angularify.semantic.accordion']);
2+
13
function RootCtrl ($scope) {
24

35
}

‎src/accordion/docs/demo.html‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<!DOCTYPE HTML>
2-
<html ng-app="angularify.semantic">
2+
<html ng-app="AccordionApp">
33
<head>
44
<meta charset="utf-8" />
55
<title>Semantic UI + Angular.JS</title>
66
<link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" />
77
</head>
88
<body ng-controller="RootCtrl">
9-
<accordion close="true">
10-
<accordion-group title="First tab" open=true>
11-
<p>Some text in first tab</p>
12-
</accordion-group>
13-
<accordion-group title="Second tab">
14-
<p>Some text in second tab</p>
15-
</accordion-group>
16-
</accordion>
9+
<accordion close="true">
10+
<accordion-group title="First tab" open=true>
11+
<p>Some text in first tab</p>
12+
</accordion-group>
13+
<accordion-group title="Second tab">
14+
<p>Some text in second tab</p>
15+
</accordion-group>
16+
</accordion>
1717

18-
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
19-
<script src="../../angularify.semantic.js" type="text/javascript"></script>
20-
<script src="../../accordion/accordion.js" type="text/javascript"></script>
21-
<script src="controllers.js" type="text/javascript"></script>
18+
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
19+
<script src="../../angularify.semantic.js" type="text/javascript"></script>
20+
<script src="../../accordion/accordion.js" type="text/javascript"></script>
21+
<script src="controllers.js" type="text/javascript"></script>
2222

2323
</body>
2424
</html>

‎src/checkbox/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
angularify.semantic.checkbox
2+
===============================
3+
4+
`angularify.semantic.checkbox` - checkbox directive for angular.js.
5+
6+
Usage
7+
-------------------------------
8+
9+
```html
10+
<div id="content">
11+
<checkbox checked="false" ng-model="aa">Alex</checkbox>
12+
<br/>
13+
<checkbox checked="true" ng-model="bb">0xAX</checkbox>
14+
<br/>
15+
<checkbox ng-model="cc">User</checkbox>
16+
</div>
17+
```
18+
19+
Contribution
20+
-------------------------------
21+
22+
1. Fork main [repository](https://github.com/angularify/angular-semantic-ui).
23+
2. Make changes.
24+
3. Create issue.
25+
4. Send pull request.
26+
5. Thank you.
27+
28+
TODO
29+
-------------------------------
30+
31+
1. Add radio-button.

‎src/checkbox/checkbox.js‎

Lines changed: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,91 @@
11
'use strict';
22

3-
angular.module('angularify.semantic.checkbox', []);
3+
angular.module('angularify.semantic.checkbox', [])
4+
5+
.directive('checkbox', function () {
6+
return {
7+
restrict: 'E',
8+
replace: true,
9+
transclude: true,
10+
require:"ngModel",
11+
scope :{
12+
type: "@",
13+
size: "@",
14+
checked: "@",
15+
model: '=ngModel'
16+
},
17+
template: "<div class=\"{{checkbox_class}}\">" +
18+
"<input type=\"checkbox\">" +
19+
"<label ng-click=\"click_on_checkbox()\" ng-transclude></label>" +
20+
"</div>",
21+
link: function(scope, element, attrs, ngModel) {
22+
23+
//
24+
// set up checkbox class and type
25+
//
26+
if (scope.type == 'standard' || scope.type == undefined){
27+
scope.type = 'standard';
28+
scope.checkbox_class = 'ui checkbox';
29+
} else if (scope.type == 'slider'){
30+
scope.type = 'slider';
31+
scope.checkbox_class = 'ui slider checkbox';
32+
} else if (scope.type == 'toggle'){
33+
scope.type = 'toggle';
34+
scope.checkbox_class = 'ui toggle checkbox';
35+
} else {
36+
scope.type = 'standard';
37+
scope.checkbox_class = 'ui checkbox';
38+
}
39+
40+
//
41+
// set checkbox size
42+
//
43+
if (scope.size == 'large'){
44+
scope.checkbox_class = scope.checkbox_class + ' large';
45+
} else if (scope.size == 'huge') {
46+
scope.checkbox_class = scope.checkbox_class + ' huge';
47+
}
48+
49+
//
50+
// set checked/unchecked
51+
//
52+
if (scope.checked == 'false' || scope.checked == undefined) {
53+
scope.checked = false;
54+
} else {
55+
scope.checked = true;
56+
element.children()[0].setAttribute('checked', '');
57+
}
58+
59+
//
60+
// Click handler
61+
//
62+
element.bind('click', function () {
63+
if (scope.checked == true){
64+
scope.checked = true;
65+
scope.model = false;
66+
element.children()[0].removeAttribute('checked');
67+
} else {
68+
scope.checked = true;
69+
scope.model = true;
70+
element.children()[0].setAttribute('checked', 'true');
71+
}
72+
});
73+
74+
//
75+
// Watch for ng-model
76+
//
77+
scope.$watch('model', function(val){
78+
if (val == undefined)
79+
return;
80+
81+
if (val == true){
82+
scope.checked = true;
83+
element.children()[0].setAttribute('checked', 'true');
84+
} else {
85+
scope.checked = false;
86+
element.children()[0].removeAttribute('checked');
87+
}
88+
});
89+
}
90+
}
91+
});

‎src/checkbox/docs/controllers.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
var checkBoxApp = angular.module('checkBoxApp', ['angularify.semantic.checkbox']);
2+
3+
function RootCtrl ($scope) {
4+
5+
}
6+

‎src/checkbox/docs/demo.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE HTML>
2+
<html ng-app="checkBoxApp">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Semantic UI + Angular.JS</title>
6+
<link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" />
7+
</head>
8+
<body ng-controller="RootCtrl">
9+
<checkbox checked="false" ng-model="aa">Alex</checkbox>
10+
<br/>
11+
<checkbox checked="true" ng-model="bb">0xAX</checkbox>
12+
<br/>
13+
<checkbox ng-model="cc">User</checkbox>
14+
15+
<script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
16+
<script src="../../angularify.semantic.js" type="text/javascript"></script>
17+
<script src="../../checkbox/checkbox.js" type="text/javascript"></script>
18+
<script src="controllers.js" type="text/javascript"></script>
19+
20+
</body>
21+
</html>

src/checkbox/test renamed to src/checkbox/test/.gitkeep

File renamed without changes.

‎src/checkbox/test/checkbox.spec.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
describe('checkbox', function () {
2+
var $scope;
3+
4+
beforeEach(module('angularify.semantic.checkbox'));
5+
6+
beforeEach(inject(function ($rootScope) {
7+
$scope = $rootScope;
8+
}));
9+
});

0 commit comments

Comments
 (0)