真，假陳述顯示html

首先，我爲可怕的標題道歉，但我不知道這個代碼是什麼樣的屬性。真，假陳述顯示html

我有一個用戶列表，

%li{"ng-repeat" => "user in users | filter:userSearch"} 
    .container 
    %a{"ng-click" => "followUnfollowUser(user)"} 
     {{ user.isFollowed ? "Unfollow" : "Follow"}} -

在這個NG-重複我檢查用戶是否已經被緊隨其後的當前用戶，通過{{ user.isFollowed ? "Unfollow" : "Follow"}}。

isFollowed函數返回true或false。

var isFollowed = function(userId) { 

    var following = $scope.current_user.following; 
    for (var i = 0; i < following.length; i++) { 
    if (following[i].id == userId) { 
     return true; 
    } 
    } 
    return false; 
}

所以，如果結果爲真（用戶被跟蹤）的NG-重複顯示Unfollow，如果結果是假它顯示Follow。

我想用圖標替換這兩個詞，取消關注和關注。

所以我替換的文本，

{{ user.isFollowed ? "%i.fa.fa-minus-square" : "%i.fa.fa-plus-square"}} -

但現在%i.fa.fa剛剛被渲染成文本。所以，我把它改成HTML，

{{ user.isFollowed ? <i class="fa fa-minus-square"></i> : <i class="fa fa-plus-square"></i>}}

現在的圖標都顯示，和{{user.isFollowed？ }}被渲染爲文字以及，

{{ user.isFollowed ? - : + }} -

有沒有辦法解決這個問題，或者我應該只是堅持到文本？

來源

2016-01-06 Peter Boomsma

可以有條件地應用類圖標這樣

<i ng-class="(user.isFollowed) ? 'fa fa-minus-square' : 'fa fa-plus-square'">

來源

2016-01-06 12:04:47 ssilas777

感謝。這個答案最適合我。 –

請嘗試以下代碼。

<i ng-show="user.isFollowed" class="fa fa-minus-square"></i> 
<i ng-show="!user.isFollowed" class="fa fa-plus-square"></i>

否則你可以使用ng類表達式。

<i ng-class="{fa fa-minus-square:user.isFollowed, fa fa-plus-square:!user.isFollowed}"> </i>

來源

2016-01-06 12:03:19

試試下面

<i class="{{ user.isFollowed ? 'fa fa-minus-square' : 'fa fa-plus-square'}}">

來源

2016-01-06 12:04:08

真，假陳述顯示html

回答

相關問題