I need to disable a div in AngularJS depend on a condition. Yes I can do it by using css change (giving low contrast and less color appearance) in appearance but I have ng-click property in it. So I need to prevent that calling also. How can I do it?
Here is my code:
<div ng-repeat="item in list.items" ng-click="goToFunction()" ng-disabled="true">
Yes ng-disabled does not work for div. It will for each html element which support the disable property (eg : input).
https://docs.angularjs.org/api/ng/directive/ngDisabled
I created a simple fiddle to demonstrate how to achieve it with a simple div http://jsfiddle.net/5Qc5k/1/
function MyCtrl($scope, $templateCache) {
$scope.isDisabled = false;
$scope.alertMe = function(){
if($scope.isDisabled === true){
return;
}
// disable the function
$scope.isDisabled = true;
alert("foo");
}
}
You can do that in controller ie:
<div ng-repeat="item in list.items" ng-click="goToFunction(item)" ng-disabled="true">
and after that in controller:
function goToFunction(item){
if(item.condition == disable){
return false
}
else {
// do something
}
}
To prevent the ng-click functionality based on disable you can do in following:-
<div ng-repeat="item in list.items" ng-disabled="item.condition" ng-click="goToFunction(item)">
item.value
</div>
$scope.goToFunction = function(item){
if(item.condition == false){
// Dont do anything
}else{
//do something
}
In this scenario when div is disabled, click functionality wont do anything, otherwise it will do.
Related
I build a custom popup which is visible when I click a button. When I click somewhere else on the document the popup should be closed / invisible.
That works pretty well.
Now I want to change the style property of this popup. The problem is that i cant change it.
The code below returns that the HTML object is null but if i click another buttom with same functionality the style changes.
Thats my code so far
tooltip.component.ts
export class TooltipComponent implements OnInit {
popup = false;
// open popup
openToolTip($event: {
target: any; stopPropagation: () => void;
})
{
$event.stopPropagation();
this.popup = !this.popup;
testvariable = document.getElementByID("popupId");
testvariable.style.backgroundcolor = "green"; //backgroundcolor just for testing
}
}
// close popup if clicked on document
#HostListener('document:click', ['$event']) onDocumentClick(event: any) {
this.popup = false;
}
constructor() { }
ngOnInit(): void {
}
}
html
<span class="info-icon" (click)="openToolTip($event)">
<mat-icon>info_outline</mat-icon>
</span>
<div *ngIf="popup" id="popupId" class="popup" (click)="$event.stopPropagation()">
<div class="text-box">
</div>
<!-- close-button -->
<a class="close" (click)="popup = false">×</a>
</div>```
EDIT:
I used the timeout function like Elikill58 said. Its a workaround but it solves my problem for now :)
The problem comes from the element isn't known yet. You are checking it too fast. There is multiple way to fix it:
Wait for it.
You can use the timeout function:
timeout(function() {
var testvariable = document.getElementByID("popupId");
testvariable.style.backgroundcolor = "green";
}, 0);
Set style with ngStyle.
If the style should depend of values, you can do like:
<div [ngStyle]="{'background-color': something ? 'green' : 'red'}">
</div>
Change style by default.
This will change the style for all popup, without requiring JS manipulation:
.popup {
background-color: green;
}
Change style with ID.
If you are using specific ID, you can do like:
#popupId {
background-color: green;
}
All ways have advantages and disadvantages, you should take the one that correspond to what you are looking for.
I'm trying to use expand-collapse feature of bootstrap 4 and was encountering a weird issue with the use of *ngIf for expansion and collapse.
Whenever I try to use *ngIf as follows, the jquery doesn't work but works when *ngIf is deleted.
HTML:
<div class="collapse-group">
<div class="row">
<div class="col-md-7" id="row">
<div id="link_text_div" *ngIf="this.collapseExpandArrowFlag==true">
<span id="collapse_all" class="close-button" (click)="arrowFunc($event)" style="cursor: pointer;" >
Collapse all
</span>
</div>
<div id="link_text_div" *ngIf="this.collapseExpandArrowFlag==false">
<span id="expand_all" class="open-button" (click)="arrowFunc($event)" style="cursor: pointer;"
>
Expand all
</span>
</div>
</div>
</div>
</div>
.Ts:
collapseExpandArrowFlag = true;
arrowFunc(event) {
if(event.srcElement.id === "collapse_all") { //On-Click Collapse Logic
this.collapseExpandArrowFlag = false;
$(".close-button").on("click", function() {
$(this).closest('.collapse-group').find('.multi-collapse').collapse('hide');
});
}
if(event.srcElement.id === "expand_all") {
this.collapseExpandArrowFlag = true;
$(".open-button").on("click", function() {
$(this).closest('.collapse-group').find('.multi-collapse').collapse('show');
});
}
Try to remove "this" in the ngIf like this:
*ngIf="collapseExpandArrowFlag==true"
Please remove the 'this.' from the *ngIf and just write
*ngIf="collapseExpandArrowFlag"
If this not working , try to change *ngIf to
[hidden]="collapseExpandArrowFlag"
and
[hidden]="!collapseExpandArrowFlag"
This will add the element and the event on the dom on load time. and will keep it there (with a display : none property in css).
Plus take into consideration how you need to work with external library code like JQuery.
See references:
Use jQuery script with Angular 6 CLI project
Change you ts file as follows
collapseExpandArrowFlag = true;
arrowFunc(event) {
if(event.srcElement.id === "collapse_all") { //On-Click Collapse Logic
this.collapseExpandArrowFlag = false;
$(this).closest('.collapse-group').find('.multi-collapse').collapse('hide');
}
if(event.srcElement.id === "expand_all") {
this.collapseExpandArrowFlag = true;
$(this).closest('.collapse-group').find('.multi-collapse').collapse('show');
}
What's happening here is, when you click the button, inside ts code,
this.collapseExpandArrowFlag = false;
is called, and in the template the close-button is removed.
But in the very next line of ts code,
$(".close-button")
is called, But in this state that element is removed from the DOM
And make sure you've removed this. from *ngIf statements
I have problem with Edge browser. In my web site I have buttons with span tags inside them. In this span tags I bind text and icons. So far I had no problem but on Edge browser it is possible to click on disabled buttons. After investigating problem I found out that, when button contains span tags inside, it is possible to click on button. Here is how it looks on my web site:
<button id="btnRefresh" type="button" class="btn btn-primary" ng-click="refresh()" ng-disabled="performingAction">
<span ng-class="performingAction && action == 'refresh' ? 'fa fa-cog fa-spin' :'fa fa-refresh'"></span>
<span>{{ refresh }}</span>
</button>
Here is example to testing:
<button type="button" disabled="disabled" onclick='alert("test");'>
<span>Click me!</span>
</button>
One option would be to hide buttons instead of disabling, but I prefer to disable them. Please suggest solution to over come this issue.
Just set
pointer-events: none;
for disabled buttons.
Here's CSS to disable all disabled elements everywhere:
*[disabled] {
pointer-events: none !important;
}
pointer-events documentation
This is a bug in Microsoft Edge. Disabled buttons accept clicks if they contain any HTML elements (i.e. if they contain anything else than just text).
Reported multiple times via Microsoft Connect:
Event bubbles from child element into element (by SO user Ryan Joy)
Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled
The bug was still present in Build 10565 (16 October 2015).
It was fixed in the November update, Build 10586.
A possible (but ugly) workaround is to call some Javascript in onclick for every button, which then checks if the button is disabled and returns false (thus suppressing the click event).
One work around I've come up with using angularjs is inspired by Ben Nadel's blog here
So for example:
angular.module('myModule').directive(
"span",
function spanDirective() {
return ({
link: function (scope, element, attributes) {
element.bind('click', function (e) {
if (e.target.parentNode.parentNode.disabled || e.target.parentNode.disabled) {
e.stopPropagation();
}
})
},
restrict: "E",
});
}
);
Since you're not always going to be using a span element and probably don't want to create a new directive for every element type, a more general workaround would be to decorate the ngClick directive to prevent the event from reaching the real ngClick's internal event handler when the event is fired on a disabled element.
var yourAppModule = angular.module('myApp');
// ...
yourAppModule.config(['$provide', function($provide) {
$provide.decorator('ngClickDirective', ['$delegate', '$window', function($delegate, $window) {
var isEdge = /windows.+edge\//i.test($window.navigator.userAgent);
if (isEdge) {
var directiveConfig = $delegate[0];
var originalCompileFn = directiveConfig.compile;
directiveConfig.compile = function() {
var origLinkFn = originalCompileFn.apply(directiveConfig, arguments);
// Register a click event handler that will execute before the one the original link
// function registers so we can stop the event.
return function linkFn(scope, element) {
element.on('click', function(event) {
if (event.currentTarget && event.currentTarget.disabled) {
event.preventDefault();
event.stopPropagation();
event.stopImmediatePropagation();
}
});
return origLinkFn.apply(null, arguments);
};
};
}
return $delegate;
}]);
}]);
How can I prevent the page from "jumping up" each time I click a link? E.g I have a link somewhere in the middle of the page and when I click it the page jumps up to the top.
Is the anchor href="#"? You can set it to href="javascript:void(0);" instead.
If you are going to a prevent default please use this one instead:
event.preventDefault ? event.preventDefault() : event.returnValue = false;
Let's presume that this is your HTML for the link:
Some link goes somewhere...
If you're using jQuery, try like this:
$(document).ready(function() {
$('a#some_id').click(function(e) {
e.preventDefault();
return false;
});
});
Demo on: http://jsfiddle.net/V7thw/
If you're not on jQuery drugs, try with this pure DOM JavaScript:
window.onload = function() {
if(document.readyState === 'complete') {
document.getElementById('some_id').onclick = function(e) {
e.preventDefault();
return false;
};
}
};
It will jump to the top if you set the link href property to # since it is looking for an anchor tag. Just leave off the href property and it won't go anywhere but it also won't look like a link anymore (and make sure to handle the click even in javascript or else it really won't be of much use).
The other option is to handle the click in javascript and inside your event handler, cancel the default action and return false.
e.preventDefault();
return false;
I have created an effect on my form with onblur and onfocus. How do I change the colors on these onblur and onfocus elements? However, I would like to keep the user's input default as black.
$('input:text').focus(function(){
var newValue = $(this).val();
if($(this).val() == 'Email'){
$(this).attr('value','');
} else {
$(this).val(newValue);
}
});
$('input:text').blur(function(){
var newValue = $(this).val();
if($(this).val() == ''){
$(this).attr('value','Email');
} else {
$(this).val(newValue);
}
});
Thank you
Well, you don't really need javascript, css can handle focus pretty well. Just define it in your stylesheet:
input[type="text"] {color:black}
input[type="text"]:focus {color:purple}
But if you have to do it with jQuery, just use the css() function:
$(this).css({'color' : 'purple'});
This plugin I made will handle that for you: inputLabel.
Otherwise, safest is to add a class and remove the class, and put the different colour in the CSS.