2

我有这个表行：

<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是必需的，并且控制器中的toggleRow($index)会将类设置为 disabled="disabled" 或只是空白。

有任何想法吗？

插图：

在此处输入图像描述

镁铁矿

ng-disabled="!selection.Ids[truckWheelbase.Id]" 确实禁用了页面加载时的所有控件，但是如何实现ng-class="getClass({{truckWheelbase.Id}})"以启用检查框点击？

4

1 回答 1

2

我不确定你的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>
于 2013-02-27T22:41:35.010 回答