有条件地绑定 angularjs

Question

我是 AngularJS 的 100% 新手，我正在尝试设置显示字符串的条件。如果用户输入的文本以字母 a 开头，则应显示 Hello {{name}}, welcome back!（其中 {{name}} 绑定到输入的名称），否则不应显示文本。我的代码如下：

<!DOCTYPE html>
    <html data-ng-app="">
    <head>
        <title>Type Your Name</title>
    </head>
    <body>
        Please type your name:
        <br />
        <table><input type="text" data-ng-model="name" />
        </br>
        Hello {{name}}, welcome back!

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js">
        </script>
    </body>
    </html>

Answer 1

您应该使用 ng-if 并检查第一个字符是否为字母 a。

<div ng-app>
    <input type="text" data-ng-model="name" />
    <span ng-if="name.charAt(0) === 'a'">Hello {{name}}, welcome back!</span>
</div>

Fiddle here.

不要使用 ng-show 因为它总是呈现 DOM 元素并在不满足条件时隐藏它， ng-if 呈现DOM 元素 if 和 only if 满足条件。

有条件地绑定 angularjs

conditionally bind angularjs

angularjs

data-binding