有条件地绑定 AngularJS



我是 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>

您应该使用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>

在这里摆弄。

不要使用 ng-show,因为它始终呈现 DOM 元素并在不满足条件时隐藏它,ng-if当且当满足条件时呈现 DOM 元素。

最新更新