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>

现在，如果字段有效，则会出现检查符号，如果它们不是交叉apears，那么：

Screenshot

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

Answer 1

使用ngIf（以及带有反向谓词的第二个ngIf代替ngShow或ngHide。前者将从DOM中删除元素，而后者只是用CSS隐藏它们。

来自Angular文档：

ngIf指令根据{expression}删除或重新创建DOM树的一部分。如果分配给ngIf的表达式求值为false值，则从DOM中删除该元素，否则将元素的克隆重新插入DOM中。

相比之下，ngShow文档通过添加.ng-hide类来解释隐藏它：

ngShow指令根据提供给ngShow属性的表达式显示或隐藏给定的HTML元素。通过将.ng-hide CSS类移除或添加到元素上来显示或隐藏元素。 .ng-hide CSS类在AngularJS中预定义，并将显示样式设置为none（使用!important标志）。

Answer 2

请尝试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>

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

2 个答案: