9
<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.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Christine268
  • 722
  • 2
  • 13
  • 32
  • 1
    You can't add attributes dynamically using Interpolation method to your html tag. In your case you can simply do `ng-disabled="x.status"` – Rahil Wazir Mar 30 '15 at 21:20

1 Answers1

17

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}}"

YaSh Chaudhary
  • 2,605
  • 8
  • 37
  • 74
Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • do you mean {{x.status}} == 'disabled' ? Also, what would status equal? What if I don't what the checkbox disabled? – Christine268 Mar 30 '15 at 21:31
  • Using @Rahil Wazir's comment above, I did ng-disabled="{{x.status}}" where status:'true' or status:'false" – Christine268 Mar 30 '15 at 21:39
  • 1
    @Christine268 hey don't use interpolation with `ng-disabled` directive, `ng-disabled` directive is matured enough to evaluate scope variables, It must be `ng-disabled="x.status"` if `x.status` has boolean – Pankaj Parkar Mar 30 '15 at 21:44
  • @pankajparker when I change it to ng-disabled="x.status" it no longer works. status either equals true or false. ng-disabled="{{x.status}}" is what's working for me. – Christine268 Mar 30 '15 at 21:48
  • @Christine268 I updated answer, Now you can do upvote & accept it Thanks :) – Pankaj Parkar Mar 30 '15 at 22:10
  • idk I think I tried clicking it even though I had already upvoted it. My reputation when down from 15 so now I can't vote. Error in the way the web registers the vote. – Christine268 Apr 03 '15 at 18:03