Angular - Bootstrap Buttons as Checkboxes with Angular

by Andy Bulka

HTML

<script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap-combined.min.css">
  <input id="gradeCheck" type="checkbox" ng-model="myModel['A']"> A
  <input type="checkbox" ng-model="myModel['B']"> B
  <input type="checkbox" ng-model="myModel['C']"> C
  <input type="checkbox" ng-model="myModel['D']"> D
<p/> 
<p/>
  myModel A {{myModel['A']}}<br/>
  myModel B {{myModel['B']}}<br/>
  myModel C {{myModel['C']}}<br/>
  myModel D {{myModel['D']}}<br/>
  
<p/>
<p/>
  <button button-toggle="active" 
    class="btn" ng-model="myModel['A']">A</button>
  <button button-toggle="active"
    class="btn" ng-model="myModel['B']">B</button>
  <button button-toggle="active"
    class="btn" ng-model="myModel['C']">C</button>
<button button-toggle="active"
    class="btn" ng-model="myModel['D']">D</button>


<p>
    This uses twitter bootstrap classes for the buttons. The class specified in button-toggle="className" will be toggled based on true/false in the model.
</p>

JavaScript

function Main($scope) {
    $scope.myModel =
        {
            "A":true, 
            "B":true,
            "C":false
        };
}

// module for using css-toggle buttons instead of checkboxes
// toggles the class named in button-toggle element if value is checked
angular.module('buttonToggle', []).directive('buttonToggle', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function($scope, element, attr, ctrl) {
            var classToToggle = attr.buttonToggle;
            element.bind('click', function() {
                var checked = ctrl.$viewValue;
                $scope.$apply(function(scope) {
                    ctrl.$setViewValue(!checked);
                });
            });

            $scope.$watch(attr.ngModel, function(newValue, oldValue) {
                newValue ? element.addClass(classToToggle) : element.removeClass(classToToggle);
            });
        }
    };
});