我有这个表格行:
<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>
我想要实现的目标:
在页面加载开始时,每个表格行的所有控件都被禁用除了第 1 列中的复选框控件。
当用户选中/取消选中相应行的复选框时,该行中的所有控件都会启用/禁用。
我没有取得太大成功,但我确信ng-class是必需的,并且 Controller 中的toggleRow($index)会将类设置为disabled=”已禁用”或只是空白。
有什么想法吗?
插图:
bmleite
ng-disabled="!selection.Ids[truckWheelbase.Id]" 确实禁用了页面加载时的所有控件,但是如何实现 ng-class="getClass( {{truckWheeelbase.Id}})" 在复选框单击时启用?
最佳答案
我不确定您的 toggleRow()
函数到底在做什么,但我假设它正在更改 selection.Ids
对象。如果是这种情况,您只需使用相同的信息来启用/禁用输入。为此,请使用 ng-disabled 指令:
<!--Payload-->
<td>
<input id="{{truckWheelbase.Payload}}" type="number" ng-class="getClass({{truckWheelbase.Id}})"
ng-disabled="!selection.Ids[truckWheelbase.Id]">
</td>
关于AngularJS - ng-click - ng-class - 切换禁用/启用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15123158/