Question

考虑我的代码段：

<div ng-app>
    <label>Username:</label>
    <input type="text" ng-model="myName" placeholder="Enter a name here">
    <h1>Login as {{myName}}</h1>
</div>

运行演示@ http://jsfiddle.net/renishar/Lt5D5/2/

在代码中，当您在文本字段中键入用户名时，它将打印在h1标记中。

此时产生输出：

登录user1

当我在文本字段中输入user1时。

仅当用户输入了值时，我才需要在user1前加上as 字样。因此，如果文本框为空，则会显示：

登录

只要他们在文本框中输入任何值，就应显示：

以“在文本框中输入的值”
登录

Answer 1

您可以添加额外的<span>，只有在myName不为空时才会显示。

<input type="text" ng-model="myName" placeholder="Enter a name here">
<h1>Login <span ng-show="myName">as </span>{{myName}}</h1>

另请参阅此 short demo 。

Answer 2

当值为空时使用ng-hide

http://jsfiddle.net/Linksonder/u9A7n/

  <h1 ng-hide="!myName">Login as {{myName}}</h1>

如何在角度js中的ng-model（keypress）事件中添加条件

2 个答案: