2016-07-06 4 views
0

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

は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> 
+0

NG-クラスを使用しているとき、私はいつも、この記事を参照してください。https://scotch.io/tutorials/ the-many-ways-to-use-ngclassが役立つことを願っています! – mhodges

+0

@mhodges私はその記事を見て、それを見たが、ボトム近くに私の答えを見つけた –

+0

素晴らしい!あなたは大歓迎です、うれしかったです。 – mhodges

答えて

0

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; 
} 
+0

おっと、ちょうど質問のコメントを読んで...どんな方法で答えをここに残します。 – Lowkase

関連する問題