Question

我使用按钮隐藏/显示（切换）div：

HTML

<button type="button" ng-click="toggleBuilder()" class="btn btn-primary">Hide Div queryBuilder</span></button>
<input type="text" class="form-control" id="searchField" ng-model="output"/>
<div class="queryBuilder" ng-hide="builder"></div>

JS

$scope.builder = true;
$scope.toggleBuilder = function() {
    $scope.builder = $scope.builder === false ? true : false;
};

现在我想实现，如果DIV被隐藏，输入与＆＃34;输出＆＃34;没有绑定。如果显示DIV，则输入应与＆＃34;输出＆＃34;

绑定

感谢您的提示

Answer 1

根据您的评论，听起来您希望在div可见时禁用输入字段。您可以通过在input元素上添加ng-disabled，并将输入绑定到输出中的单独变量，并在调用toggle函数时将输出分配给绑定变量来完成此操作，如下所示：

<button type="button" ng-click="toggleBuilder()" class="btn btn-primary">Hide Div queryBuilder</span></button>
<input type="text" class="form-control" id="searchField" ng-model="searchTerm" ng-disabled="!builder"/>
<div class="queryBuilder" ng-hide="builder"></div>

和

$scope.builder = true;
$scope.toggleBuilder = function() {
    $scope.builder = $scope.builder === false ? true : false;
    // set the bound variable if the builder is hidden
    $scope.searchTerm = $scope.builder ? $scope.searchTerm : $scope.output;
};

Answer 2

<button type="button" ng-click="toggleBuilder()" class="btn btn-primary">Hide Div queryBuilder</span></button>
<input type="text" class="form-control" id="searchField" ng-model="output"/>
<div class="queryBuilder" ng-hide="builder">{{output}}</div>

这应该有效，即使div被隐藏，在文本字段中输入仍然会更新范围属性output。当ng-model指令在作用域上找不到时，它将隐式创建一个名为output的作用域属性。

值得注意的是，值正在控制器中存储/更新，而不是在您的视图中，您可能有一百万{{output}}个绑定，它们都会显示与您键入的值相同的值进入你的文本域，所以即使你的div被隐藏，它只是隐藏输出，但这并不能防止它被更新，因为这在控制器中发生。

{{output}}（或ng-bind =＆＃34;输出＆＃34;）只会显示output范围属性的值。

ng-bind用于按钮单击时的输入

2 个答案: