CODEWITHSUNDEEP
javascriptangularjs
H_C
H_C

Reputation: 337

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

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;

Upvotes: 0

Views: 62

Answers (2)

Guinn
Guinn

Reputation: 1385

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

Upvotes: 0

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

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

Upvotes: 1

Related Questions