AngularJS - ng-click - ng-class - 禁用/启用切换

时间:2013-02-27 21:51:24

标签: angularjs

我有这个表格行

<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 =“禁用“或只是空白。

有什么想法吗?

插图:

enter image description here

bmleite

ng-disabled =“!selection.Ids [truckWheelbase.Id]”确实禁用了页面加载的所有控件,但如何实现 ng-class =“getClass( {{truckWheelbase.Id}})“启用复选框后点击?

1 个答案:

答案 0 :(得分: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>