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" または単に空白に設定すると確信しています。

何か案は？

図：

ここに画像の説明を入力

bmleite

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 に答える