├── .gitignore
├── angular-icheck.png
├── angular-icheck.less
├── index.html
├── angular-icheck.css
├── bower.json
├── README.md
├── LICENSE
└── angular-icheck.js
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | .idea/
--------------------------------------------------------------------------------
/angular-icheck.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/xialeistudio/angular-icheck/HEAD/angular-icheck.png
--------------------------------------------------------------------------------
/angular-icheck.less:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Consolas", "Microsoft YaHei", Arial, arial, sans-serif;
3 | }
4 |
5 | .angular-icheck {
6 | overflow: hidden;
7 | .checkbox {
8 | width: 22px;
9 | height: 22px;
10 | display: inline-block;
11 | vertical-align: middle;
12 | background: url("angular-icheck.png") no-repeat left;
13 | &.checked{
14 | background-position: -48px 0;
15 | }
16 | }
17 | .label {
18 | display: inline-block;
19 | vertical-align: middle;
20 | }
21 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Angular-iCheck
6 |
7 |
8 |
9 | 男
10 | {{male}}
11 |
12 |
13 |
18 |
19 |
--------------------------------------------------------------------------------
/angular-icheck.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: "Consolas", "Microsoft YaHei", Arial, arial, sans-serif;
3 | }
4 | .angular-icheck {
5 | overflow: hidden;
6 | }
7 | .angular-icheck .checkbox {
8 | width: 22px;
9 | height: 22px;
10 | display: inline-block;
11 | vertical-align: middle;
12 | background: url("angular-icheck.png") no-repeat left;
13 | }
14 | .angular-icheck .checkbox.checked {
15 | background-position: -48px 0;
16 | }
17 | .angular-icheck .label {
18 | display: inline-block;
19 | vertical-align: middle;
20 | }
21 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "angular-icheck",
3 | "main": "angular-icheck.js",
4 | "version": "1.0.0",
5 | "authors": [
6 | "xialeistudio "
7 | ],
8 | "description": "a icheck directive for angularjs like jQuery iCheck.",
9 | "keywords": [
10 | "angularjs",
11 | "icheck"
12 | ],
13 | "license": "MIT",
14 | "homepage": "https://git.coding.net/xialei/angular-icheck.git",
15 | "ignore": [
16 | "**/.*",
17 | "node_modules",
18 | "bower_components",
19 | "test",
20 | "tests"
21 | ],
22 | "dependencies": {
23 | "angular": "~1.4.1"
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # angular-icheck
2 | a icheck directive like jQuery iCheck for angularjs
3 | demo is at index.html
4 |
5 | ```
6 |
7 |
8 |
9 |
10 | Angular-iCheck
11 |
12 |
13 |
14 | 男
15 | {{male}}
16 |
17 |
18 |
23 |
24 |
25 | ```
26 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 xialei
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
--------------------------------------------------------------------------------
/angular-icheck.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @author xialei
3 | */
4 | angular.module('angular-icheck', [])
5 | .directive('iCheck', [function () {
6 | return {
7 | restrict: 'EA',
8 | transclude: true,
9 | require: 'ngModel',
10 | replace: true,
11 | template: '',
12 | link: function (scope, ele, attrs, ctrl) {
13 | var box = angular.element(ele[0].querySelector('.checkbox'));
14 | ele.bind("click", function () {
15 | box.toggleClass("checked");
16 | ctrl.$setViewValue(box.hasClass("checked"));
17 | });
18 | ctrl.$render = function () {
19 | if (ctrl.$viewValue) {
20 | box.addClass("checked");
21 | } else {
22 | box.removeClass("checked");
23 | }
24 | };
25 | // https://github.com/angular/angular.js/issues/2594
26 | // override $isEmpty method
27 | ctrl.$isEmpty = function(value) {
28 | return value === false;
29 | };
30 | ctrl.$setViewValue(box.hasClass("checked"));
31 | ctrl.$validate();
32 | }
33 | }
34 | }]);
--------------------------------------------------------------------------------