After click anywhere removed the class with angularJs - javascript

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

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!

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.

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()">

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

Related

How to Assign two function to a single toggle button in angular js

I want to change a button name once it is clicked. There are two functions differently Add and Subtract. first-time button name is 'Add', when it clicked it should execute add number function and then name dynamically change button name to Subtract, and once I clicked to subtract it should execute subtract function and again the name of a button come to Add which is previous. How can I do this? how to call a different function like add function when button toggle is add and vice versa.
now I can toggle between two buttons but facing issues with calling add and subtract functions.
<div ng-app="myModule">
<div ng-controller="myController">
<button ng-click="toggle = !toggle">
{{ toggle ? 'Add' : 'Subtract' }}
</button>
</div>
</div>
Varsha, Could you please check this working fiddle. Do you want this?
Explanation: You can use a flag (functionToBeCalled in this case) to call the targeted function and switch the text of the button.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="personCtrl">
<button ng-click="functionToBeCalled == 'Add' ? add() : substract();">
{{ functionToBeCalled }}
</button>
<br>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.functionToBeCalled = "Add";
$scope.add = function() {
$scope.functionToBeCalled = "Substract";
alert('Add is clicked');
};
$scope.substract = function() {
$scope.functionToBeCalled = "Add";
alert('Substract is clicked');
};
});
</script>
</body>
</html>
You probably want to have 2 buttons defined and show one of them at a time using ng-if. ng-if removes the button from the DOM if the condition is not met. See the official documentation: https://docs.angularjs.org/api/ng/directive/ngIf
<div ng-app="myModule">
<div ng-controller="myController">
<button ng-if="toggle" ng-click="add()">
Add
</button>
<button ng-if="!toggle" ng-click="subtract()">
Subtract
</button>
</div>
</div>

How to show/hide button?

I'm making an app with a dynamic page. I have multiple buttons on my page but all buttons should not be visible at once rather visible one after another in consecutive. I need them to be invisible at first. For instance, the first button should be visible. When I click on that button, the button should disappear and the new button should appear and so forth. What would be the best option for implementing this using ng-show/ng-hide?
Edit--------
As for what I tried to do with them, I tried to do something like this but then I get confused with it all.:
<button style="Width: 6em;" ng-show="show" ng-click="question()">???</button>
<button style="Width: 6em;" ng-hide="hide" ng-click="question1()">???</button>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var darkness = "Darkness";
$scope.darkness = darkness;
$scope.question = function () {
var text = "Nothing but darkness and the pain that radiates through your very being.";
$scope.text = text;
$scope.hide = false;
$scope.show = !show;
}
});
I've been working on an application that shows and hides div elements. Hope you can you proceed with the following example.
<div class="container" ng-app="showHideApp" ng-controller="showHideController">
<div class="col-sm-8 col-sm-offset-2">
<!-- FORM -->
<div class="form-group">
<button class="btn btn-danger" ng-click="showMe();">Click me for show</button>
<button class="btn btn-danger" ng-click="hideMe();">Click me for hide</button>
</div>
<div class="form-group" ng-show="show">
<p>I am showing</p>
</div>
</div>
</div>
JS Code:
angular.module('showHideApp',[]).controller('showHideController', function($scope){
$scope.showMe = function(){
$scope.show=true;
}
$scope.hideMe = function(){
$scope.show=false;
}
});

Check if div is hidden in AngularJS from controller?

I have a div that I am hiding/showing using angular in my HTML, but I want to know how to check if it is currently hidden or not in my controller.
Any solutions I have found so far are jQuery based using 'hasClass' to find ng-hide, but I don't want to use jQuery.
My div looks like this
<div class="item item-input" ng-show="showDetails"></div>
<button class="button button-block button-light leftTextButton"
ng-click="showDetails = ! showDetails; updateTimes()">
<i ng-class="{'icon icon ion-minus-round': showDetails,
'icon icon ion-plus-round': !showDetails}"></i> End Time</button>
I thought from my controller I could just call if($scope.showDetails) and that would return true or false, but it is undefined.
How can I check if a div if hidden or showing from my controller? Thanks
I'm guessing you are having a scoping issue. Passing it to the function that will check it is the best bet. Otherwise if it is in scope the controller should be able to access it.
angular.module('MyApp', [])
.controller('MyController', ['$scope',
function($scope) {
$scope.myBoolean = false;
$scope.checkMyBooleanOnScope = function() {
alert($scope.myBoolean);
};
$scope.checkMyOtherBooleanOnScope = function() {
alert($scope.myOtherBoolean);
};
$scope.checkBooleanByPassingIt = function(bool) {
alert(bool);
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<p>myBoolean predefined in the controller:{{myBoolean}}
<input type="checkbox" ng-model="myBoolean" />
</p>
<p>
<button ng-click="checkMyBooleanOnScope()">checkMyOtherBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myBoolean)">checkMyBooleanByPassingIt</button>
</p>
<p>myOtherBoolean defined on the page with ng-model:{{myOtherBoolean}}
<input type="checkbox" ng-model="myOtherBoolean" />
</p>
<p>
<button ng-click="checkMyOtherBooleanOnScope()">checkMyBooleanOnScope</button>
<button ng-click="checkBooleanByPassingIt(myOtherBoolean)">checkMyOtherBooleanByPassingIt</button>
</p>
</div>

Angular dropdown with a button not getting data

im new to angular and was struck linking dropdown selected to ng-click button
<div class="col-xs-2">
<select name="cars" ng-model="dropdown_data">
<option>email</option>
<option>phone</option>
<option>username</option>
</select>
</div>
<br />
<div class="col-xs-4">
<button type="button" class=" " data-ng-click="search_{{dropdown_data}}()">Search</button>
</div>
<script>
var ng = angular.module('myApp', []);
ng.controller('ctrl', function($scope, $http) {
$scope.search_phone = function() {
alert("phone")
}
$scope.search_email = function() {
alert("email")
}
})
</script>
this seems to be fairly simple but im not sure what im doing wrong...Im not able to show alerts depending on selected dropdown
Plunker link http://plnkr.co/edit/Iicm9tvfizXxNl3MwtZI?p=preview
any help is much appriciated...thanks in advance
There were few things that you needed in the plunkr.
Firstly you need to define on the HTML that it is in fact an Angular Application (via the ngApp attribute).
Secondly you need to define a controller for your view (via the ngController attribute).
Once you have those things in place, you need to understand what this would do
ng-click="search_{{dropdown_data}}()"
If you think about how ng-click works, it registers a function on click. This happens on the compile phase of a directive (as you can see on its sourcecode).
This means that when the directive compiles, it will register the function with the name search_{{dropdown_data}} and even though the dropdown_data will be interpolated later on when its value changes, the originally bound function won't update.
However if you had dropdown_data as an attribute or as a key to a map of functions that will work. Here an example of how you may do that:
$scope.search = {
phone: function() {
alert("phone")
},
email: function() {
alert("email")
}
};
and on the button: data-ng-click="search[dropdown_data]()"
Here a working plunkr: http://plnkr.co/edit/u4vJj2a0r1a95w64crHM?p=preview
I am also new in angular but have used same functionality without search button direct given anchor link try this if you need,
<div ng-app="myApp">
<div ng-controller="setContent">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Subject
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="a in subjects">{{a}}</li>
</ul>
</div>
var app = angular.module('myApp', []);
app.controller('setContent', function($scope, $http) {
$scope.subjects = ['Math', 'Physics', 'Chemistry', 'Hindi', 'English'];
});
});
The problem is this data-ng-click="search_{{dropdown_data}}()". Better to pass a value to the function like this:
<button type="button" data-ng-click="search(dropdown_data)">Search</button>
$scope.search = function(type) {
alert(type)
}
also dont forget ng-app and ng-controller.
see the plunker

unbind ng-click dynamically from element : angularjs

i have an element which have ng-click event and on clicking it adds a div that works fine. what i want is to remove ng-click after adding the div .
one way is to use ng-if
<div ng-click="addDiv()" ng-if="!divAdded" >
<span>i add a div</span>
</div>
<div class="disabled" ng-if="divAdded" >
<span>i add a div</span>
</div>
for this i have to add multiple div for single element that works on and off.
is there any way to unbind click event like we do in jquery dynamically?
any help will be appreciated
You can also do this:
<div ng-click="divAdded || addDiv()" >
<span>i add a div</span>
</div>
This will prevent ng-click from calling addDiv() if divAdded is true
Put that logic into the controller, not into the view
Controller:
(function(){
function divAddController() {
var self = this;
self.divAdded = false;
self.addDiv = function() {
if(!divAdded) {
//Add div here
self.divAdded = true;
}
}
}
angular.module("example")
.controller("divAddController", divAddController);
})();
View:
<div ng-controller="divAddController as divAdder">
<div ng-click="divAdder.addDiv()" ng-class="{disabled: divAdder.divAdded}">
<span>i add a div</span>
</div>
</div>
You can do it in a more easy way like this:
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope) {
$scope.showDiv = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<button ng-click="showDiv = true;">I show the div</button>
<div ng-if="showDiv">I am visible!</div>
</div>

Categories