I have a custom element that I just want to show when I click a button. Then, when I click that button, I want to do something like...:
<my-element [hidden]="switchHidden()"></my-element>
... so if it's in false, it now will be true, and viceversa. A very typical approach.
But I don't know how I can pass to my function "switchHidden()" the value of the "hidden" attribute. How can I do this, so I can check whether it is true or false?
Thank you!
Don't use hidden attribute, use:
<my-element *ngIf="switchHidden"></my-element>
http://angularjs.blogspot.ba/2016/04/5-rookie-mistakes-to-avoid-with-angular.html
PLUNKER Demo
Just have a variable in your component that is a boolean for when you want to show and hide it.
let showElement: Boolean = true;
Then when you want to toggle it on/off with a button put this in the click.
<button (click)="showElement = !showElement">Toggle</button>
and that will flip the value of showElement every time the user clicks the button. So if showElement is true, when the user clicks the button it will make showElement false and thus hidding your element. Vise versa for when showElement is false, the user clicks the button making it true and thus showing your element.
Related
I have a button in html that i want to make a search bar appear when clicked and make it disappear when clicked a second time. I already know how to do the first one but i don't know how to to do the second one.
Looks like you are asking for a toggle switch, on/off or true/false state. Simply declare a local variable in your component and set it false initially. Change it once the button is clicked -
<button (click)="onClick()">
<div *ngIf="showSearchbar">this is searchbar</div>
showSearchbar: boolean;
onClick() {
this.showSearchbar = !this.showSearchbar;
}
I have a question about making input fields required before being able to click a input button (not submit button). My code below only will send out the requirement notice after a submit button is click.
I have my form split into 3 div's with 'next' buttons in between which conditionally displays the next div. How do I make the input field to be required before the 'next' button brings up the next div portion of my form?
You should post the html for your question. It is missing. That being said, look into the blur event that gets trigger everytime an input loses focus. You could add the logic to display an error to the user and disable the next button.
http://www.w3schools.com/jquery/event_blur.asp
You have two main options:
FIRST OPTION
You could disable your button like so: <input id="but" type="button" disabled>, and then, you could set your field onchange method to enable the button i. e. <input type="text" onchange="changed();"> and in your script,
function changed(){
if(1 == 1){ // custom test
document.getElementById("but").disabled = false;
}
}
SECOND OPTION
In your button handler, verify your textfield is filled i. e.
function butHandler(){
if(document.getElementById("textfield").value !== "") {
// do your actions
}
}
How can I remove "X" button from Popup in angularJS? I don't need it because the cancel button that I have implemented has same functional but the "X" button couldn't reset modifies. It will be implemented as default in HTML:
<div class="ngdialog-close"></div>
While opening popup you need to pass one option showClose which will hide close button if its false.(default true)
Code
ngDialog.open({
template: 'templateId',
className: 'ngdialog-theme-default',
showClose: false //<-- while opening dialog make it false
});
You have to read documentation before integrating (using) any module in your project. Here is the complete list of options for ngDialog.
Hide close button
I created a button
<button type="button" ng-click="chooseOptions()" id="chooseOptionButton" ng-bind="whatToDisplay()"></button>
Which shows a <div ng-show=appearOnChoice>on click and toggles back when clicking again!
$scope.chooseOptions=function(){
$scope.appearOnChoice=!$scope.appearOnChoice;
}
However, I also want this element to hide again, when the user clicks anywhere outside this div
element. How can I do this? I need strictly stick with AngularJS and not use jQuery.
Hope you can help me with that.
EDIT: I tried to adapt some of the events of bootstrap datepicker, but I am not sure how to apply it properly
$scope.$on('datepicker.focus', focusElement);
scope.$watch('isOpen', function(value) {
if (value) {
scope.$broadcast('datepicker.focus');
scope.position = appendToBody ? $position.offset(element) : $position.position(element);
scope.position.top = scope.position.top + element.prop('offsetHeight');
$document.bind('click', documentClickBind);
} else {
$document.unbind('click', documentClickBind);
}
});
var focusElement = function() {
$timeout(function() {
self.element[0].focus();
}, 0 , false);
};
How can I adapt this to my case?!
I think that you dont have to write a function, you can use ng-init to create a model, ng-show to show/hide the div based on the value of the model, and with ng-click change the value of the model. See example below:
var myapp = angular.module('myapp',[]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-init="showDiv = true;" >
<div ng-show="showDiv"> SHOOOOOOOOW </div>
<button ng-click="showDiv = !showDiv;">Click me</button>
</div>
</div>
You can set the model value to be false when the user is clicking everywhere else, and set it again to true when it clicks the button. If you made a fiddle I can help you easier :)
If the DIV has focus, then you can use the ng-blur directive on the DIV to run set appearOnChoice to false. However, if the DIV does not already have focus (which it won't if you are depending on the button to make it visible), you will need to manipulate the DOM in your code (to provide focus) OR create a custom directive to set focus so that the ng-blur directive will work. Check out possibilities for that with this link.
alternatively, you can add an ng-click directive to every clickable object on your view that will hide the DIV when fired. But I don't really think that's the best way to go...
The easiest and cleanest way to handle the click away is to register and event on the document that will remove the element when anything other than it, or its children, are clicked.
For an example of a service that does this see GitHub EnzeyNet/Services
Sorry about the lack of documentation there but after injecting the service you would use it like this.
var divElem
nzService.registerClickAwayAction(function() {
divElem.remove();
}, divElem);
I simply solved it by using a ui bootstrap dropdown. This comes along with an is-open option and closes on click outside.
I have a couple of HTML elements on a page. Whenever the page context is invalidated and it re-renders the elements are re-rendered with no visual cue of the selected option.
If I check for the selection using $('.select1 option:selected') the selected option is returned. However, it is not rendered as selected. If it's a drop-down, then the first element shows up. If it's a multi-line select, the first (firefox) or last (chrome) element shows up with a greyed out select line on it.
If I then click the selected element a second time, it shows up as selected.
Anyone know how to fix this?
I implemented the solution here: Meteor form state not being saved
Store the selected value in a session variable on click:
Template.packageViewer.events({
'change .tagselect': function(){
Session.set('tag', $('.tagselect :selected').html());}
,
'change .groupselect': function(){
Session.set('group', $('.groupselect :selected').html());}
,
'change .packageselect': function(){
Session.set('package', $('.packageselect :selected').val());}
});
Then set the select selected value in the post-render function:
Template.packageViewer.rendered = function(){
$('.groupselect').val(Session.get('group'));
$('.tagselect').val(Session.get('tag'));
}
Hacky, but works.
Maybe you can use $('.select1').trigger("change"); function.