How can I disable my checkbox from AngularJS input?

Question

<div ng-repeat="x in spaceutilization">
  <input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" /><label for="{{x.id}}"><button type = "button" class = "btn btn-primary btn-sm hidden-sm hidden-xs"> PDF</button></label><br />
</div>

I need to be able to add something to this snippet that disables the input checkbox based on another AngularJS input such as {{x.status}}. I tried simply doing:

<input type="checkbox" name="{{x.filenumber}}" id="{{x.id}}" class = "pdffiles" value="101SP{{x.initials}}.dwg" {{x.status}} />

Where status:'disabled' but that gave an output of

{{x.status}}=""

within the input element...which I don't understand why at all. But it seemed like the simplest route.

Answer 1

You need to use ng-disabled="expression" directive, on basic of expression evaluation value it add disabled attribute to that element.Also for better attribute values evaluation you could use ng-attr directive

Markup

<input type="checkbox" ng-attr-name="{{x.filenumber}}" ng-attr-id="{{x.id}}" class ="pdffiles" 
value="101SP{{x.initials}}.dwg" ng-disabled="x.status == 'disabled'"/>

If x.status does return a bool value then you could directly used ng-disabled="{{x.status}}"