可能是我这个不太清楚，所以再次尝试问我真正想要什么（请原谅，如果它仍然不清楚）。尝试将多个 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 上执行此操作以重新排序表格有人可以告诉我如何实现这种更清洁、更好的方法吗？
3 回答
慕森王
TA贡献1777条经验 获得超3个赞
也许你可以使用这样的东西：
<span ng-class="{'classname' : condition}"></span>例如：
<span ng-class="{'icon1-class': obj.value1 == 'someothervalue' || obj.value2 == 'other-class'}"></span>
RISEBY
TA贡献1856条经验 获得超5个赞
使用三元运算符的 ng-class 的格式应如下所示
ng-class="variableToEvaluate ? 'class-if-true' : 'class-if-false'">
因此，您需要在声明的第一部分中进行所有评估，然后适当地应用课程。
杨__羊羊
TA贡献1943条经验 获得超7个赞
我会说括号是错误的。但它是非常难读的三元运算符。
为了更好地了解逻辑，您可以将此三元逻辑重写为控制器中的方法。就像下面这样：
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)">
添加回答
举报
0/150
提交
取消