如何更改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输入。