テーブルセルのアイコン上の条件付きngクラス

Question

テーブルがあり、ng-repeatを使用してセルとデータをバインドします。 1つのセルに編集、保存、削除のアイコンがあります。注文が転記されている場合は、削除/保存アイコンを無効にする必要があります。またアイコンの色も異なるはずです。アイコンの削除/保存のクリックイベントを無効にすることはできますが、CSSクラスを変更する方法はわかりません。このコードでは、保存と削除をクリックすることはできません。私はそれらを明るい灰色または明らかに異なる色に変えたいと思います。ここで

はHTMLである：ここでは

 <tbody> 
      <tr ng-repeat="order in vm.orders track by $index" ng-dblclick="vm.editOrder(order)" style="cursor:pointer" ng-class="{'class':order.invoiceStatus, 'disabled-order': !order.invoiceStatus}">            
       <td ng-bind="(order.dtInvoiced | date:'MM/dd/yyyy')"> </td>             
       <td ng-bind="order.invoiceNumber"></td> 
       <td ng-bind="order.invoiceItems.mdbsPoNumber"></td> 
       <td align="center" ng-bind="order.lines"></td> 
       <td ng-bind="(order.total | number:2)"></td> 
       <td align="center" ng-bind="order.carrier"></td>             
       <td> 
       <a ng-click="vm.editOrder(order)"><i class="fa fa-pencil fa-2x"></i></a> 
       <a ng-click="order.disabledToggle || vm.saveOrder(order)"><i class="fa fa-check fa-2x"></i></a> 
       <a ng-click="order.disabledToggle || vm.removeOrder(order)"><i class="fa fa-trash fa-2x link-icon"></i></a> 
       </td> 
       </tr> 
     </tbody> 

は保存し、削除アイコンのクリックイベントを無効にするには、JSです：

function orderItems() { 
    var orders; 
    if (vm.Criteria != null) { 
      orderService.getOrderData(vm.Criteria) 
    .then(function (result) { 
     vm.data = result.data; 
     orders = vm.data; 
     for (var i = 0; i < vm.data.length; i++) { 
      orders[i].disabledToggle = false; 
      if (orders[i].invoiceStatus == "RCV") { 
       orders[i].disabledToggle = true;      
      } 
      else { 
       orders[i].disabledToggle = false; 
      } 
      vm.orders.push(orders[i]);     
     } 

    }); 
    } 
} 

私もアイコンで試してみた：

<i ng-class="order.invoiceStatus = order.disabledToggle ? 'disabled-order class' : 'class' "></i> 

Answer 1

ng-classを使用して、変数の評価をtrueにすることができます。変数がtrueの場合、クラスセレクタは、要素の中に注入されます。この場合は

<a ng-click="order.disabledToggle || vm.saveOrder(order)"><i ng-class="{ 'cssCheckDisabled': jsCheckDisabled } class="fa fa-check fa-2x"></i></a> 

我々はjsCheckDisabledを評価しています。試してみると、cssCheckDisabledクラスセレクタが要素に注入されます。その後

はあなたがやりたいためにあなたのCSSでクラスセレクタを作るのと同じくらい簡単です：

cssCheckDisabled { 
color: red; 
}