带有三元运算符的 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&nbsp;ng-class="{'classname'&nbsp;:&nbsp;condition}"></span>例如：<span&nbsp;ng-class="{'icon1-class':&nbsp;obj.value1&nbsp;==&nbsp;'someothervalue'&nbsp;||&nbsp;obj.value2&nbsp;==&nbsp;'other-class'}"></span>

Answer 2

使用三元运算符的 ng-class 的格式应如下所示ng-class="variableToEvaluate&nbsp;?&nbsp;'class-if-true'&nbsp;:&nbsp;'class-if-false'">因此，您需要在声明的第一部分中进行所有评估，然后适当地应用课程。

Answer 3

我会说括号是错误的。但它是非常难读的三元运算符。为了更好地了解逻辑，您可以将此三元逻辑重写为控制器中的方法。就像下面这样：function getFaIcon(presentHeader, previousHeader) {&nbsp; var result = '';&nbsp; if (presentHeader != previousHeader || presentHeader =='itemID') {&nbsp; &nbsp; result = 'fa fa-thumbs-up';&nbsp; } else {&nbsp; &nbsp; if (alterTblType && presentHeader=='itemID') {&nbsp; &nbsp; &nbsp; result = 'fa fa-thumbs-down';&nbsp; &nbsp; } else if (!alterTblType && presentHeader=='itemID') {&nbsp; &nbsp; &nbsp; result = 'fa fa-thumbs-up';&nbsp; &nbsp; }&nbsp; }&nbsp; return result;}它也可以被简化，因为在两种情况下您返回相同的值'fa fa-thumbs-up'。此外，当它是一个方法时，您可以对方法结果进行一些缓存，这对于加速摘要周期可能非常有用。您可以对其进行调试并了解实际问题所在。在 HTML 中，您可以这样称呼它：ng-class="getFaIcon(presentHeader, previousHeader)">