Angular: Disable CSS class

http://angularjs.org/

HTML

<script type="text/javascript" ng:autobind src="http://code.angularjs.org/0.10.5/angular-0.10.5.js"></script>

<button class='button' disabled>
test
</button>
<h3>In template</h3>

<ul>
<li ng:repeat="node in nodes"
    ng:class="node.type + (node.disabled && ' disabled' || '')"> 
    {{node.name}} 
</li>
</ul>
<h3>Method on controller</h3>
<ul>
<li ng:repeat="node in nodes"
    ng:class="clsForNode(node)"> 
    {{node.name}} 
</li>
</ul>

CSS

h3 {font-size: 1.3em;}
ul {margin-bottom: 20px;}
    
.disabled {color: orange;}
.folder {color: green;}

.button{
  background-color: red !important;
  box-shadow: 0 0 0 1px black inset !important;
}

.button:focus{
  background-color: green !important;
}

.button:disabled,
.button[disabled]{
  border: 1px solid #999999;
  background-color: blue !important;
  color: #666666;
  box-shadow: 0 0 0 1px red inset !important;
}

JavaScript

function Main() {
    this.nodes = [{
        type: 'folder',
        name: "Stuff"
    }, {
        type: 'file',
        name: "things.txt"
    }, {
        type: 'file',
        name: "forbidden.txt",
        disabled: true
    }];
    
    this.clsForNode = function(node) {
        return [node.type, node.disabled ? 'disabled' : 'enabled'];
    };
}