ng-bind for input on button click

Question

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

As far as I can see, the div isn't binding (assuming you mean ng-bind) to output anyway? — Robin-Hoodie
– Robin-Hoodie, Commented Jun 10, 2015 at 18:59
Sorry for my bad english :-) I want to achieve, that the user is able to fill in the input field if the div is hidden. If the div is shown, the input will be filled automatically by values of "output". — mm1975
– mm1975, Commented Jun 10, 2015 at 19:06
Just put {{output}} between the div tags, that should do the trick — Robin-Hoodie
– Robin-Hoodie, Commented Jun 10, 2015 at 19:09
Unrelated to your question, but you can probably simplify $scope.builder = $scope.builder === false ? true : false; to just $scope.builder = !$scope.builder; — Mouse Reeve
– Mouse Reeve, Commented Jun 10, 2015 at 19:17

Mouse Reeve · Accepted Answer · 2015-06-10 19:12:21Z

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

Robin-Hoodie · Accepted Answer · 2015-06-10 19:24:20Z

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

Collectives™ on Stack Overflow

ng-bind for input on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related