我有一个 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
元素应该消失,但事实并非如此
如何解决这个问题?
最佳答案
您不应该使用函数在 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>
并确定您的模型是否确实正确更新。
关于javascript - 不满足条件时如何使用 ng Show/ng Hide 隐藏 DOM 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39379717/