带有三元运算符的 ng 类中的 fa fa-图标（Angular.Js 1.x）？

Question

可能是我这个不太清楚，所以再次尝试问我真正想要什么（请原谅，如果它仍然不清楚）。尝试将多个 html 片段减少为单行。实际块如下所示（具有超过 8 列，如下所示）<div class="spanHolder">    <span ng-click="reOrderTbl('marchendId', asd)">data.columnName</span>    <span ng-hide="presentHeader != previousHeader || presentHeader =='itemID'"><i class="fa fa-thumbs-up"></i></span>    <span ng-show="alterTblType && presentHeader=='itemID'"><i class="fa fa-thumbs-down" ></span>    <span ng-show="(!alterTblType && presentHeader=='itemID')"><i class="fa fa-thumbs-up" ></span></div>所以改成<div class="spanHolder">    <span>data.columnName</span>    <span ng-click="reOrderTbl('marchendId', asd)"    ng-class = "(presentHeader != previousHeader || presentHeader =='itemID') ? 'fa fa-thumbs-up' :     (alterTblType && presentHeader=='itemID') ? 'fa fa-thumbs-down' :     (!alterTblType && presentHeader=='itemID') ? 'fa fa-thumbs-up' : ''" ></span></div>但是它不起作用，也没有抛出任何错误，也不显示图标原因：在实际代码片段中，我不希望 columnName 可单击，而是想在 fa-Icons 上执行此操作以重新排序表格有人可以告诉我如何实现这种更清洁、更好的方法吗？

Answer 1

也许你可以使用这样的东西：

<span ng-class="{'classname' : condition}"></span>

例如：

<span ng-class="{'icon1-class': obj.value1 == 'someothervalue' || obj.value2 == 'other-class'}"></span>

Answer 2

使用三元运算符的 ng-class 的格式应如下所示

ng-class="variableToEvaluate ? 'class-if-true' : 'class-if-false'">

因此，您需要在声明的第一部分中进行所有评估，然后适当地应用课程。

Answer 3

我会说括号是错误的。但它是非常难读的三元运算符。

为了更好地了解逻辑，您可以将此三元逻辑重写为控制器中的方法。就像下面这样：

function getFaIcon(presentHeader, previousHeader) {

  var result = '';

  if (presentHeader != previousHeader || presentHeader =='itemID') {

    result = 'fa fa-thumbs-up';

  } else {

    if (alterTblType && presentHeader=='itemID') {

      result = 'fa fa-thumbs-down';

    } else if (!alterTblType && presentHeader=='itemID') {

      result = 'fa fa-thumbs-up';

    }

  }

  return result;

}

它也可以被简化，因为在两种情况下您返回相同的值'fa fa-thumbs-up'。

此外，当它是一个方法时，您可以对方法结果进行一些缓存，这对于加速摘要周期可能非常有用。

您可以对其进行调试并了解实际问题所在。

在 HTML 中，您可以这样称呼它：

ng-class="getFaIcon(presentHeader, previousHeader)">