After click anywhere removed the class with angularJs

Question

Let's say i have a search box and i want to display it after user click on button . so far so good .
but i want to add another feature , when user click anywhere search box go away .
How can i do this with AngularJs ?

this is my code :
HTML

  <button class="btn btn-info " ng-click="addStyle()" ><i class="fa fa-search"></i>

            Search</button>
  <input type="text"  placeholder="Type" class="{{noneStyle}} {{visibleStyle}}">

Angular

app.controller("MainCtrl", function($scope,$http){


    $scope.noneStyle = "noneVisible";
    $scope.addStyle = function(){
        $scope.noneStyle = "visibleStyle";
    }

})

any idea ?
Thx in advance

Check out this solution: http://stackoverflow.com/questions/12931369/click-everywhere-but-here-event — RSquared, Oct 15 '14 at 23:05

pedrommuller · Accepted Answer · 2014-10-15T23:06:44.747

1

I'd recommend use ng-if instead

app.controller("MainCtrl", function($scope,$http){

   $scope.visible = true;
    $scope.changeStatus = function(){
        $scope.visible = !$scope.visible; 
    }
    $scope.hideAll= function(){
      $scope.visible=false;
    }

})

HTML

<div class="well" ng-controller="MyController">
    <button class="btn btn-primary" ng-disabled="checked" ng-click="changeStatus()" ng-blur="hideAll()">BUTTON</button>
    <hr/>
       {{visible}}
       <input type="text"  placeholder="Type" ng-if="visible">  
</div>

look at this jsFiddle

try it out!

edited Oct 15 '14 at 23:06

answered Oct 15 '14 at 22:50

pedrommuller

15,741
10
76
126

thank you , i've added your code but it's not working – Oct 15 '14 at 23:11

score 1 · Answer 2 · answered Oct 16 '14 at 03:17

Use ng-blur/ng-focus to achieve this.

I demonstrate a simple code over here. http://jsfiddle.net/lookman/1Lp95or0/

var myApp = angular.module('myApp',[]);

myApp.controller('MyController', function($scope) {

    $scope.visible = true;
    $scope.changeStatus = function(){
        $scope.visible = !$scope.visible; 
    }
    $scope.hideAll= function(){
      $scope.visible=false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyController">
    
<button ng-disabled="checked" 
    ng-click="changeStatus()">Click to show/hide the input box</button>
    <hr/>
    <p>Current visible status: {{visible}}</p>
   <input type="text"  placeholder="Type" ng-show="visible" ng-blur="hideAll()">  
       
</div>
    </div>

Note that in this example, you need to click on input box first before clicking elsewhere to hide it. I hope this is what are you looking for and this helps.

score 0 · Answer 3 · answered Oct 15 '14 at 22:54

0

Use the ng-blur directive to update your model when the user clicks somewhere else:

<button class="btn btn-info " ng-click="addStyle()" ng-blur="removeStyle()">

answered Oct 15 '14 at 22:54

floribon

19,175
5
54
66

Thank you , i've added it and add removeStyle function but nothing happend . – Oct 15 '14 at 23:08
It does work on my example, maybe your removeStyle function is doing something wrong? Check that example: http://jsfiddle.net/floribon/kLrc2Ltr/ – floribon Oct 16 '14 at 02:58
yes , and the reason that code does'nt work is angular version , ng-focus work with 1.2 version – Oct 17 '14 at 21:19

score 0 · Answer 4 · answered Oct 15 '14 at 22:58

You could do it using standard JavaScript, registering an event listener once the search box is displayed and unregistering it, as soon as the user has clicked anywhere:

$scope.addStyle = function()
{
    $scope.noneStyle = "visibleStyle";

    // register event listener
    document.addEventListener("click", hideSearchBox);
}

function hideSearchBox()
{
    // set style to hide search box
    $scope.noneStyle = "noneVisible";
    // unregister event listener
    document.removeEventListener("click", hideSearchBox);
}

I'm not sure if there is a more Anuglar-way of doing it. To do so, you would need to register something on document level, as you want the search box to be hidden if you click anywhere. And "anywhere" might not be where the Angular root scope is registered..

After click anywhere removed the class with angularJs

4 Answers4