使用 bootstrap toggle 搭配 ng-model

javascript
====
.directive("togglebox", function () {
        return {
             scope: {

                togglebox: "=" // 設定 屬性值 綁定 ng-model

            },

            link: function (scope, element,ngModel) {
                element.on('change', function() {
                    var checked = element.prop('checked');
                    scope.$apply(function () {

                        scope.togglebox = checked; // 對應 $scope.switch

                    });

                });              
            }
        }
    })

html
====
<input togglebox="switch" type="checkbox" checked data-toggle="toggle" data-on="全部" data-off="營收" data-onstyle="success" data-offstyle="info">

css (指定寬度，文字置中)

====

 .toggle.btn {

    width:80px !important;

    min-height:28px;

}

.toggle-off.btn,  .toggle-on.btn{

     padding-left: 5px; padding-right: 5px; 

}

bootstrap toggle