When working with JSON data, I encountered a situation where I needed to display different types of student details in a table. For one specific type of student, namely partners, I wanted to include input controls such as checkboxes and buttons. However, even though the checkboxes were visible, the controls themselves appeared disabled.
This is the approach I took:
{{i.memberType | fcap}} Member - {{i.name.first}} {{i.name.last}}
<tfoot ng-show="i.memberType == 'PARTNER'">
<tr>
<td>
<input type="checkbox" id="iautho" ng-model="iautho" ng-checked="ctrl.isAuthorized">
<label for="iautho">I authorize this member to view and update student information.</label>
<input type="checkbox" id="ihave" ng-model="ihave" ng-checked="ctrl.isAuthorized">
<label for="ihave" ng-show="iautho">I have read, understand and voluntarily agree to all the terms and conditions of the
<a href="#" ng-click="navigate('global.account.agreements',{agreementId:9}, true)">Partner Access Authorization agreement.</a></label>
<button id="studentdetails" type="submit" class="btn btn-primary" ng-disabled="!ihave">Update
</button>
</td></tr>
<hr class="m-y-1">
</tfoot>
I am having trouble understanding why the controls are disabled. Can someone please advise on what might be going wrong?