使用三元运算符(Angular.Js1.x)的ng类中的fa图标

Question

可能是我的这个SO不清楚，所以再次尝试问我真正想要什么(如果还不清楚，请原谅(。

试图将多个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

ng类的格式应如下所示

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

因此，您需要在语句的第一部分中进行所有评估，然后适当地应用类。

Answer 2

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

为了更好地了解逻辑，您可以将这个三元逻辑重写为控制器中的方法。如下所示：

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)">

Answer 3

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

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

例如：

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