CODEWITHSUNDEEP
angularjs
mm1975
mm1975

Reputation: 1655

ng-bind for input on button click

I use a button to hide/show (toggle) a 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;
};

Now I would like to achieve that if the DIV is hidden, the input has no binding with the "output". If the DIV is shown, the input should have the binding with "output".

Thank you for your tips

Upvotes: 0

Views: 1478

Answers (2)

Robin-Hoodie
Robin-Hoodie

Reputation: 4974

<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>

This should work, even when the div is hidden, typing into the textfield will still update the scope property output. the ng-model directive will implicitly create a scope property called output when it doesn't find one on the scope.

It's important to note that the value is being stored/updated in the controller, not in your view, you could have a million {{output}} bindings, they would all show the same value as you type into your textfield, so even if your div is hidden, it just hides the output, but that doesn't prevent it from being updated, as this happens in the controller.

The {{output}} (or ng-bind="output") will just show the value of the output scope property.

Upvotes: 0

Mouse Reeve
Mouse Reeve

Reputation: 267

Based on your comments, it sounds like you want to disable the input field when the div is visible. You can accomplish this by adding an ng-disabled on the input element, and binding the input to a separate variable from output, and assigning output to the bound variable when the toggle function is called, like so:

<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>

And

$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;
};

Upvotes: 1

Related Questions