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 =＆＃34;！formName。$ invalid＆＃34;

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

从它的声音中你可以正确绑定模型，并且在更改数据时更新错误的对象。首先在页面上删除<pre>{{activeDirectoryConfiguration | json }}</pre>，然后确定您的模型是否实际正在正确更新。

如何在不满足条件时使用ngShow / ngHide隐藏DOM元素？

1 个答案: