테이블 셀의 아이콘에 대한 조건부 클래스

Question

테이블이 있고 ng-repeat를 사용하여 셀에 데이터를 바인딩합니다. 하나의 셀에는 편집, 저장, 삭제 아이콘이 있습니다. 주문이 게시 된 경우 삭제/저장 아이콘이 비활성화되어야하며 아이콘도 다른 색상이어야합니다. 삭제/아이콘 저장의 클릭 이벤트를 비활성화 할 수 있지만 CSS 클래스를 변경하는 방법을 알 수 없습니다. 이 코드를 사용하면 저장 및 삭제를 클릭 할 수 없습니다. 밝은 회색이나 분명히 다른 색으로 바꾸고 싶습니다.

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]);     
     } 

    }); 
    } 
} 

나는 또한 아이콘에 시도했다 : :

다음

 <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입니다 : 여기

는 HTML입니다

<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 클래스 선택기가 요소에 삽입됩니다.

cssCheckDisabled { 
color: red; 
}