javascript - ng-show 和 ng-hide 有时不适合需要

Question

我是 AngularJS 的新手，AngularJS 中最棒的事情之一是 ng-hide 和 ng-show 指令，它们可用于显示网页的某些部分或隐藏。现在有时我不想展示某个部分，当时它工作正常，但有时它工作但以一种不受欢迎的方式。

例子:

<div class="row">
    <div class="col-xs-6">
        <h2>Login</h2>
        <p class="text-danger">{{message}}</p>
        <form name="form" novalidate>
            <div class="form-group">
                <label>Email: </label>
                <div class="input-group">
                    <input type="email" name="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
                    <div ng-show="form.email.$invalid" class="input-group-addon">
                        <i class="fa fa-times-circle"></i>
                    </div>
                    <div ng-hide="form.email.$invalid" class="input-group-addon">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label>Password: </label>
                <div class="input-group">
                    <input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
                    <div ng-show="form.password.$invalid" class="input-group-addon">
                        <i class="fa fa-times-circle"></i>
                    </div>
                    <div ng-hide="form.password.$invalid" class="input-group-addon">
                        <i class="fa fa-check-circle"></i>
                    </div>
                </div>
            </div>
            <button type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="authenticate(credentials)">Login</button>
            <a href="#/register">Register</a>
        </form>
    </div>
</div>

现在，如果字段有效，则会出现复选符号，如果它们不是这样的十字形:

但是如果你仔细观察带有十字符号的插件没有圆 Angular ，这可能是因为带有复选符号的插件仍然存在但隐藏了。现在在这种情况下我该怎么办。在这种情况下，我希望包含检查插件的 div 完全消失而不是隐藏。如何实现？

Answer 1

试试 ng-if="form.password.$invalid" 和 ng-if="!form.password.$invalid" ；从 DOM 中删除元素。

看看 ngIf documentation进一步研究。代码片段:

          <div class="input-group">
                <input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
                <div ng-if="form.password.$invalid" class="input-group-addon">
                    <i class="fa fa-times-circle"></i>
                </div>
                <div ng-if=" ! form.password.$invalid" class="input-group-addon">
                    <i class="fa fa-check-circle"></i>
                </div>
            </div>