Angular+JQ+Bootstrap

by andytjoslin

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    {{hello}}
    <br />
    <div item-checkbox ng-model="hello" value="what's up" ng-init="hello=true"></div>
</div>

CSS

.on-class {
    color: green;
}
.off-class {
    color: red;
}

JavaScript

var app=angular.module('myApp', []);

app.directive('itemCheckbox', function() { //http://docs.angularjs.org/guide/directive
    return {
        scope: {
            ngModel: '=',
            value: '@'
        },
        link: function(scope, elm, attrs) {
            var effect=attrs.effect || 'fade';
            var checkElm = elm.children(); //http://docs.angularjs.org/api/angular.element
            
            //watch the string value that ngmodel was given as
            scope.changeClass = function(newVal) {
                console.log('change');
                if (newVal) {
                    elm.removeClass(attrs.offClass).addClass(attrs.onClass);
                } else {
                    elm.removeClass(attrs.onClass).addClass(attrs.offClass);
                }
            };                
                
        },
        template:
        '<table>'+
        '<tr ng-click="ngModel = !ngModel">'+
        '<td ng-class="{\'on-class\': ngModel, \'off-class\': !ngModel}">{{ngModel && \'✓\' || \'✘\'}}<td>'+
        '<td>{{value}}</td>'+
        '</tr'+
        '></table>'
    };
}); 
        

function MyCtrl($scope) {
    
}