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

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

现在，如果字段有效，则会显示复选符号，如果不是，则如下所示：



但是，如果您仔细观察，带有十字符号的插件没有圆角，这可能是因为带有复选符号的插件仍然存在但被隐藏了。现在在这种情况下我该怎么办。我希望在这种情况下包含check addon的div完全消失而不是保持隐藏。如何做到这一点？

最佳答案

尝试使用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>

关于javascript - 有时ng-show和ng-hide不合适，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27961136/