freizl · February 11, 2014 11:02
diff --git a/directive-inside-ng-repeat b/directive-inside-ng-repeat
 <!doctype html>
 <html>
  <head>
    <script src="angular-1.2.9.js"></script>

    <style type="text/css">
        ul{ margin:0; padding:0}
        ul li{list-style:none}
        input.toggle {
            max-height: 0;
            max-width: 0;
            opacity: 0;
        }
        /* The following provides the "container" for our toggle in its default (off) state */
        input.toggle + label {
            display: block;
            position: relative;
            box-shadow: inset 0 0 0px 1px #d5d5d5;
            text-indent: 60px;
            height: 30px;
            width: 50px;
            border-radius: 15px;
        }
        /* The following provides the green background for the "on" state of our toggle - it is hidden when the switch is off */
        input.toggle + label:before {
            content: "";
            position: absolute;
            display: block;
            height: 30px;
            width: 30px;
            top: 0;
            left: 0;
            border-radius: 15px;
            background: rgba(19,191,17,0);
            -webkit-transition: .25s ease-in-out;
        }
        /* The following provides the actual switch and its drop shadow */
        input.toggle + label:after {
            content: "";
            position: absolute;
            display: block;
            height: 30px;
            width: 30px;
            top: 0;
            left: 0px;
            border-radius: 15px;
            background: white;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.2);
            -webkit-transition: .25s ease-in-out;
        }
        /* The following defines the "on" state for the switch */
        input.toggle:checked + label:before {
            width: 50px;
            background: rgba(19,191,17,1);
        }
        input.toggle:checked + label:after {
            left: 20px;
            box-shadow: inset 0 0 0 1px rgba(19,191,17,1), 0 2px 4px rgba(0,0,0,.2);
        }
    </style>
  </head>
  
  <body>
      <div ng-app="myApp">
        <scheckbox ischecked="1" name="aaaa"></scheckbox>
        <scheckbox ischecked="0" name="bbbb"></scheckbox>
        <scheckbox ischecked="1" name="cccc"></scheckbox>
        <div ng-controller="testCtrl">
            <ul>
                <li ng-repeat="item in listItems">
                    <scheckbox ischecked="{{item[0]}}" name="{{item[1]}}"></scheckbox>
                </li>
            </ul>
        </div>
      </div>

    <script type="text/javascript">

        angular.module("myApp", [])
            .controller('testCtrl', ['$scope',function($scope) {
                $scope.listItems = [[0,'hello'],[1,'angular'],[0,'JS']];
            }])
            
            .directive('scheckbox',function(){
                return {
                    replace: true,
                    restrict:'EA',
                    scope: {},
                    link: function(scope, element, attrs){
                        scope.name=attrs.name || '';
                        scope.$watch(attrs.ischecked,function(){
                            scope.checked=(attrs.ischecked==0?false:true);
                        });
                    },
                    template: '<div>'
                             +'     <input type="checkbox"'
                             +'         class="toggle" id="{{name}}"'
                             +'         name="{{name}}" '
                             +'         ng-checked="checked" />'
                             +'     <label for="{{name}}">{{name}}</label>'
                             +'</div>'
               };
        });
    </script>

  </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<script src="angular-1.2.9.js"></script>

	<style type="text/css">
	ul{ margin:0; padding:0}
	ul li{list-style:none}
	input.toggle {
	max-height: 0;
	max-width: 0;
	opacity: 0;
	}
	/* The following provides the "container" for our toggle in its default (off) state */
	input.toggle + label {
	display: block;
	position: relative;
	box-shadow: inset 0 0 0px 1px #d5d5d5;
	text-indent: 60px;
	height: 30px;
	width: 50px;
	border-radius: 15px;
	}
	/* The following provides the green background for the "on" state of our toggle - it is hidden when the switch is off */
	input.toggle + label:before {
	content: "";
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	top: 0;
	left: 0;
	border-radius: 15px;
	background: rgba(19,191,17,0);
	-webkit-transition: .25s ease-in-out;
	}
	/* The following provides the actual switch and its drop shadow */
	input.toggle + label:after {
	content: "";
	position: absolute;
	display: block;
	height: 30px;
	width: 30px;
	top: 0;
	left: 0px;
	border-radius: 15px;
	background: white;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.2);
	-webkit-transition: .25s ease-in-out;
	}
	/* The following defines the "on" state for the switch */
	input.toggle:checked + label:before {
	width: 50px;
	background: rgba(19,191,17,1);
	}
	input.toggle:checked + label:after {
	left: 20px;
	box-shadow: inset 0 0 0 1px rgba(19,191,17,1), 0 2px 4px rgba(0,0,0,.2);
	}
	</style>
	</head>

	<body>
	<div ng-app="myApp">
	<scheckbox ischecked="1" name="aaaa"></scheckbox>
	<scheckbox ischecked="0" name="bbbb"></scheckbox>
	<scheckbox ischecked="1" name="cccc"></scheckbox>
	<div ng-controller="testCtrl">
	<ul>
	<li ng-repeat="item in listItems">
	<scheckbox ischecked="{{item[0]}}" name="{{item[1]}}"></scheckbox>
	</li>
	</ul>
	</div>
	</div>

	<script type="text/javascript">

	angular.module("myApp", [])
	.controller('testCtrl', ['$scope',function($scope) {
	$scope.listItems = [[0,'hello'],[1,'angular'],[0,'JS']];
	}])

	.directive('scheckbox',function(){
	return {
	replace: true,
	restrict:'EA',
	scope: {},
	link: function(scope, element, attrs){
	scope.name=attrs.name \|\| '';
	scope.$watch(attrs.ischecked,function(){
	scope.checked=(attrs.ischecked==0?false:true);
	});
	},
	template: '<div>'
	+' <input type="checkbox"'
	+' class="toggle" id="{{name}}"'
	+' name="{{name}}" '
	+' ng-checked="checked" />'
	+' <label for="{{name}}">{{name}}</label>'
	+'</div>'
	};
	});
	</script>

	</body>
	</html>