Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app='MyApp'>
​
  <head>
    <script src='https://code.angularjs.org/1.3.1/angular.js'></script>
    <script src='http://code.angularjs.org/1.3.1/angular-sanitize.js'></script>
  </head>
​
  <body ng-controller='MyController as myCtrl'>
    <div checkbox-template=''></div>
    Checked boxes: <div ng-repeat='checked in data.checkboxes'>{{checked}}</div>
  </body>
​
</html>
 
​
 
dir = angular.module('my-directives', []);
​
dir.directive('checkboxTemplate', function(){
  return {
    restrict: 'A',
    template: "<ul><li ng-repeat='cb in data.tpl1' ng-bind-html='myCtrl.renderHtml(cb)'></ul>"
  };
});
​
app = angular.module('MyApp', ['ngSanitize', 'my-directives']);
​
app.service('DataService', function() {
  return {
    checkboxes: [],
    tpl1: [
        "<label><input type='checkbox' value='1' ng-click='boxToggle(1)' ng-checked='data.checkboxes.indexOf(1) > -1'/>Checkbox 1</label>",
        "<label><input type='checkbox' value='2' ng-click='boxToggle(2)' ng-checked='data.checkboxes.indexOf(2) > -1'/>Checkbox 2</label>"
      ]
  };
});
​
app.controller('MyController', ['$scope', '$sce', 'DataService', function($scope, $sce, DataService) {
  $scope.data = DataService;
  self = this;
  
  this.renderHtml = function(raw_html){
    return $sce.trustAsHtml(raw_html);
  };
  
  $scope.boxToggle = function(idx) {
    i = $scope.data.checkboxes.indexOf(idx);
    alert('Toggling Checkbox');
    
    if (i > -1) {
      $scope.data.checkboxes.splice(i,1);
    } else {
      $scope.data.checkboxes.push(idx);
    }
  };
}]);
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers