不满足条件时如何使用 ng Show/ng Hide 隐藏 DOM 元素？答案

【问题标题】：How to hide the DOM element with ngShow/ngHide when condition is not met?不满足条件时如何使用 ng Show/ng Hide 隐藏 DOM 元素？
【发布时间】：2016-09-07 22:05:56
【问题描述】：

我有一个看起来像 DOM 的元素

                    <div data-ng-if="allControllerFieldsAreProvided($index)" class="test-controller-connection">
                        <a href="" ng-click="fetchUsersFromDataSource($index, 10)">Test Connection</a>
                    </div>

函数看起来像

 $scope.allControllerFieldsAreProvided = function (adSetupIndex) {
                        return $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].name.length > 0 &&
                               $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.host.length > 0 &&
                               $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.port.length > 0 &&
                               $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.userName.length > 0 &&
                               $scope.activeDirectoryConfiguration.activeDirectorySetups[adSetupIndex].activeDirectoryDataSource.password.length > 0;
                    };

最初，当没有提供输入时，DOM 元素被隐藏，然后当所有输入都提供时，DOM 元素出现。

问题
当再次删除任何输入（例如，从输入框中删除的文本）时，问题就开始了。在这种情况下，DOM 元素应该消失，但不是

我该如何解决这个问题？

【问题讨论】：

如果没有 JavaScript 错误，那么这是一个逻辑问题。在这种情况下，如果我们不知道您的其余代码，我们将无法帮助您。

标签： javascript angularjs angularjs-scope show-hide

【解决方案1】：

您不应该在 ng-if 中使用函数进行评估。每次运行摘要循环时都会评估 ng-if 语句的原因。（这很常见）尝试在allControllerFieldsAreProvided 函数中添加console.log('hello')，你就会明白我的意思了。

如果您使用的是 ng-repeat，只需检查迭代对象是否有您需要的属性。

如果没有满足所有必需的输入，也可以使用表单验证器将表单对象设置为 $invalid。那么你可以使用 ng-if="!formName.$invalid"

从用户体验的角度来看，显示和隐藏按钮是不好的。我会在按钮上使用ng-disabled="formName.$invalid"。

从听起来你的模型没有正确绑定，当数据改变时你更新了错误的对象。首先在页面上放置 <pre>{{activeDirectoryConfiguration | json }}</pre> 并确定您的模型是否实际上正在正确更新。

【讨论】：