亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

帶有三元運算符的 ng 類中的 fa fa-圖標(Angular.Js 1.x)?

帶有三元運算符的 ng 類中的 fa fa-圖標(Angular.Js 1.x)?

守著星空守著你 2023-11-02 22:37:54
可能是我這個不太清楚,所以再次嘗試問我真正想要什么(請原諒,如果它仍然不清楚)。嘗試將多個 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>


查看完整回答
反對 回復 2023-11-02
?
RISEBY

TA貢獻1856條經驗 獲得超5個贊

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

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

因此,您需要在聲明的第一部分中進行所有評估,然后適當地應用課程。


查看完整回答
反對 回復 2023-11-02
?
楊__羊羊

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


查看完整回答
反對 回復 2023-11-02
  • 3 回答
  • 0 關注
  • 204 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號