javascript - 表格单元格中图标上的条件 ng 类

Question

我有一个表格并使用 ng-repeat 将我的单元格与数据绑定(bind)。一个单元格有编辑、保存、删除图标。如果已发布订单，则应禁用删除/保存图标，并且图标也应为不同的颜色。我能够禁用删除/保存图标的单击事件，但无法弄清楚如何更改 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 评估变量是否为真。如果变量为真，那么类选择器将被注入(inject)到元素中:

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

在这种情况下，我们正在评估 jsCheckDisabled。一旦尝试将 cssCheckDisabled 类选择器注入(inject)到元素中。

然后就像在 CSS 中创建一个类选择器一样简单:

cssCheckDisabled {
 color: red;
}