如何有條件地顯示Angular指令？

我正在嘗試使用Angular指令來創建自定義輸入字段類型。例如，我有一個名爲「持續時間」的類型，它繪製了三個單獨的小時，分鍾和秒字段。我試圖使用該指令作爲輸入元素的屬性，並且該指令替換了輸入元素。如何有條件地顯示Angular指令？

例如，在下面的代碼：

<input duration>

將呈現爲與<div>它內部的多個輸入，以及原始輸入將是出來的畫面。

我正在運行一個ngRepeat循環通過不同類型的幾個表單域，其中包括duration。我想找到一種方法，只需要我在HTML中輸入一個輸入，並且僅在字段應爲duration類型時應用duration屬性。我試過如下：

<div ng-repeat="field in fields"> 
    <input type='{{field}}' ng-attr-duration="field==='duration'"> 
</div>

的與該代碼的問題是，每一個元素都呈現爲duration因爲ng-attr-duration被評估爲duration='false'當字段不長，這會觸發我的指令。

有沒有辦法讓我有條件地應用指令而不必定義多個<input>來減少我的代碼中的冗餘？

來源

2015-08-09 Zak

您是在尋找ng-show？隱藏/顯示基於表達式的元素：https：//docs.angularjs.org/api/ng/directive/ngShow – Boland

現在我正在用ng-if解決它（ng-if實際上從DOM中刪除元素而ng-show只能通過CSS隱藏它），這有助於驗證，否則我會隱藏所需的字段，並且表單永遠不會被視爲有效。但無論哪種方式，我想要一種方法，不需要在代碼中添加兩個單獨的輸入元素以避免冗餘（如果可能的話） – Zak

看看什麼directive docs說的ng-attr：

當使用ngAttr的$interpolate的allOrNothing標誌使用，所以如果在插值字符串結果undefined任何表情，屬性被刪除，沒有添加到元素中。

請注意，您需要使用大括號，以便Angular插入表達式。而且，如果您的表達式中包含未定義的術語，則不會添加該屬性。

怎麼是這樣的：

<div ng-repeat="field in fields"> 
    <input type='{{field}}' ng-attr-duration="{{field==='duration' ? true : undefined}}"> 
</div>

三元表達式可以是任何你想要的true，只是沒有undefined。

來源

2015-08-09 05:13:43

我剛試過這個，但不幸的是duration屬性仍然包含在內。我也測試了ng-attr-duration =「undefined」和ng-attr-duration =「{{undefined}}」，但是這兩者都導致duration屬性保持不變。 – Zak

@Zak有趣。它的工作原理是當屬性名稱不是一個指令時（我很好奇並且製作了一個[plunker]（http://plnkr.co/edit/0BgPW9iQEdor33iPRjUd?p=preview）。 –

@Zak oops，我忘記保存我的更改了Plunkr，現在已經更新了，看起來Angular做錯了，在我的情況下，它沒有添加'duration'屬性，但是我仍然看到了我的'duration'指令的效果。 –

什麼，我能想到的，你可以使用條件的if-else NG-開關

<div ng-repeat="field in fields"> 
    <div ng-switch on="field"> 
     <input ng-switch-when="true" type='{{field}}' ng-attr-duration="field==='duration'"> 
     <input ng-switch-default="true" type='{{field}}'> 
    </div> 
</div>

它也將保持代碼的可讀性的。

來源

2015-08-09 06:31:41 xdeepakv

如何有條件地顯示Angular指令？

回答

相關問題