Clear input in Angular with button, but same button is also used as part of ng-show

Question

First of all, I can imagine the subject of this question is not very clear, so sorry for that. I am using a button with ng-click to display an input (ng-show) and two other buttons(send, cancel). For hiding the input again I use the "cancel" button. But I also would like to clear the value of the input. The problem is that I dont know how to invoke the clear function as well as the hiding the input again with the same button. Here is my code:

    <button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">
    show input.
    </button>

    <div class="form-group" ng-show="showme">
        <input id="myInput2" class="typeahead" sf-typeahead type="text" datasets="userDataset" ng-model="searchUser" >
        <button ng-click="showme=false" class="btn btn-xs">Cancel</button>
        <button ng-click="send()" class="btn btn-success btn-xs btn-sent">Send</button>
    </div>

    $scope.showme = false;

Nikhil Aggarwal · Accepted Answer · 2015-06-09 14:52:05Z

1

Just update your code

<button class="btn-share" ng-click="showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">

with

<button class="btn-share" ng-click="searchUser='';showme = !showme" clickng-class="{true: 'hideBtn', false: 'btn btn-xs btn-danger'}[showme]">

I have added searchUser='' in ng-click. So, when user click on it, it will first update the searchUser to empty string in scope and then update showMe in scope.

If you do not want information after cancel, you can do the same thing with ng-click of cancel button.

Here is a plunker for you - http://plnkr.co/edit/X9wbGYsBoIXxR7QmE1zP?p=preview

answered Jun 9, 2015 at 14:52

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Guinn · Accepted Answer · 2015-06-09 14:54:51Z

0

If you add this line to your clear() function:

$scope.showme = false;

it will invoke the function and set the showme variable to false, thus hiding the div!

So your clear function could look like this:

$scope.clear = function() {
    $scope.searchUser = "";
    $scope.showme = false;
}

edited Jun 9, 2015 at 14:54

answered Jun 9, 2015 at 14:49

Guinn

1,39514 silver badges29 bronze badges

Collectives™ on Stack Overflow

Clear input in Angular with button, but same button is also used as part of ng-show

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