I have this table row:
<table>
<tr ng-repeat="truckWheelbase in truckWheelbases | orderBy:sortFunction" ng-click="toggleRow($index)">
<td>
<!--Wheelbase-->
<label class="checkbox" for="{{truckWheelbase.Id}}">
<input type="checkbox" ng-model="selection.Ids[truckWheelbase.Id]" id="{{truckWheelbase.Id}}">
{{truckWheelbase.WheelBaseGrade}} - {{truckWheelbase.Inches}} inches
</label>
</td>
<!--Payload-->
<td>
<input id="{{truckWheelbase.Payload}}" type="number" ng-class="getClass({{truckWheelbase.Id}})">
</td>
</tr>
.......remaining rows ............
</table>
What I am trying to accomplish:
At the onset of page load all the controls for each table row are disabled except the check box controls in column 1.
When the user checks/unchecks the respective row's check box, all the controls in that row are enabled/disabled.
I am not having much success but I am sure ng-class is required and the toggleRow($index) in the controller will set the class to disabled="disabled" or just blank.
Any ideas?
Illustration:

bmleite
ng-disabled="!selection.Ids[truckWheelbase.Id]" does indeed disable all the controls on page load, but how do I implement ng-class="getClass({{truckWheelbase.Id}})" to enable on check box click?
I'm not sure what your toggleRow() function is doing exactly but I assume it is changing the selection.Ids object. If that's the case, you just need to use that same information to enable/disable the inputs. For that, use the ng-disabled directive:
<!--Payload-->
<td>
<input id="{{truckWheelbase.Payload}}" type="number" ng-class="getClass({{truckWheelbase.Id}})"
ng-disabled="!selection.Ids[truckWheelbase.Id]">
</td>