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

Question

我有一个 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 元素应该消失，但事实并非如此

如何解决这个问题？

Answer 1

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

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

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

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

从声音来看，您的模型未正确绑定(bind)，并且当数据更改时您正在更新错误的对象。首先删除 <pre>{{activeDirectoryConfiguration | json }}</pre>并确定您的模型是否确实正确更新。