对表格单元格中的图标有条件的ng级别

我有一个表格并使用ng-repeat将我的单元格与数据绑定。一个单元格具有编辑，保存，删除图标。如果订单已经发布，那么应该禁用删除/保存图标，并且图标也应该是不同的颜色。我能够禁用删除/保存图标的点击事件，但无法弄清楚如何改变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>

来源

2016-07-06 Troy Bryant

使用纳克级的时候我总是引用这篇文章：https://scotch.io/tutorials/多种方式使用ng类希望它有帮助！ – mhodges

@mhodges我看到那篇文章掩盖它，但发现我的答案接近底部谢谢 –

太棒了！欢迎您，很高兴这有帮助 – mhodges

您可以使用ng-class来评估变量是否为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; 
}

来源

2016-07-06 19:52:02 Lowkase

哎呀，只是阅读问题中的评论......任何方式都会在这里留下答案。 – Lowkase

对表格单元格中的图标有条件的ng级别

回答

相关问题