如何更改Aurelia中輸入字段的可見性？

Question

我在奧雷利亞有以下表格。 在表單的頂部，有一個下拉菜單可以選擇用戶類型。 只有兩個選擇。 當用戶更改類型時，我需要顯示和隱藏一些輸入字段。

IE：當用戶選擇類型為“生產者”時，我需要隱藏用戶名。 當用戶選擇“作家”時，我需要顯示用戶名並隱藏電子郵件地址。 像這樣。 需要使用JavaScript控制器執行此操作。

https://gist.github.com/chanakaDe/75934983cb4a02a7a8914959e38bf0f3

這是作為github要點的HTML代碼。 請給我一個解決方案。

Answer 1

您可以使用show.bind （如果你只是想顯示和隱藏的元素），或if.bind （如果你想添加和刪除其形成DOM）。 例如：

<div class="form-group" id="div_username" if.bind="user_type === 'writer'">
  <label for="userame">Username:</label>
  <input type="text" class="form-control" id="userame" value.bind="userame" placeholder="Userame">
</div>

可運行的示例https://gist.run/?id=33db6b8f919eb95d63b8bfbc2e912fe5-將用戶類型更改為“ writer”，您將看到Username輸入。