AngularJS-ng单击-ng类-禁用/启用切换

我有这一排桌子：

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

{{truckWheelbase.wheelbase}}-{{{truckWheelbase.Inches}}英寸
……剩余行。。。。。。。。。。。。

我正在努力实现的目标：

<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，并且控制器中的切换行（$index）将类设置为disabled=“disabled”或空白

有什么想法吗

插图：

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

Bmlite

---

ng disabled=“！selection.Ids[truckWheelbase.Id]”确实禁用了页面加载上的所有控件，但是如何实现ng class=“getClass（{{truckWheelbase.Id}）”在复选框单击时启用？

我不确定您的

切换行（）

函数正在精确执行，但我假设它正在更改

selection.Ids

对象。如果是这种情况，您只需要使用相同的信息来启用/禁用输入。为此，请使用

ng disabled

指令：

<!--Payload-->  
<td>
    <input id="{{truckWheelbase.Payload}}" type="number" ng-class="getClass({{truckWheelbase.Id}})" 
           ng-disabled="!selection.Ids[truckWheelbase.Id]">
</td>

请尝试

ng disabled=“selection.Ids[truckWheelbase.Id]”，而不是
ng class=“…”