Maybe I'm just not thinking straight. Can I enable/disable a link via my controller using some form of angular ng-click and ng-disabled?
see fiddle...
The 'Do stuff to things' button should not be enabled unless at least one 'thing' is checked, and no action should be taken either. Of course, once a Thing IS checked, the button should activate.
The more I try to fix this, the more complicated it gets, and I can't help but think I'm overlooking something obvious.
Because ng-disabled for INPUT's.
Use ng-class here is an example in fiddle
<a ng-class="{'disabled': things.length==0}" ng-click="doStuff()">Do stuff to Thing(s)</a>
$scope.doStuff = function(){
if($scope.things.length==0) return;
console.log('Stuff has been done to things');
}
First of all, you need to remove the curly around your test if you want to do something with ng-disabled. Generally, you dont need to use them with the native angular directive (except for ng-href..)
Afterward, the ng-disabled dont prevent the ng-click if it's not on a button, so you need to use a button or use a syntaxe like this in your ng-click:
ng-click="condition && doSomething()"
Here is a working example, hope it will help you
ng-class="{active: condition}" you give an literal object with an active attribute.Check out ryeballer's answer in this post: Angular JS + Button should be enabled if at least one checkbox is checked how To do it?
The plunker ryeballer provided should be modified by flipping the condition in the ng-disabled directive:
ng-disabled="!isChecked()"
Here's an adjusted plunker: http://plnkr.co/edit/N0az5UeVH0VRlGK1ZwvC?p=preview
This seems very similar to what you want to do.
Keep in mind also that the ng-disabled directive doesn't seem to affect anchor tags. So, if you can, use something else (such as a button element ). Also, note how your initial solution does not take advantage of Angulars data-binding. Rather than setting ng-click events on your checkboxes, just tell Angular what this data is via the ng-model directive. Let Angular take care of the stuff you've got in your setThing() method.
If you're allowed to use jQuery then you can use .removeClass(), as I did here with your script.
http://jsfiddle.net/kirdua/dxquye40/21/
code
