I have ng-repeat on a div that contains a button. Say the div repeats 5 times with 5 buttons. I want to disable the 2nd button when it is clicked. How can I disable the button at that index?
<div ng-repeat='thing in things'>
<button ng-click='clickToDisable($index)'>button</button>
</div>
Something like this. I tried ng-disabled= 'disableButton == $index but that just disables all of the buttons.
You can pass in the $event into the click function and set the disabled attribute to true, like this:
<div ng-repeat='thing in things'>
<button ng-click='clickToDisable($event)'>button</button>
</div>
And in the controller:
$scope.clickToDisable = function(evt) {
evt.currentTarget.setAttribute('disabled', 'true');
}
Here is a fiddle of it working.
Related
So i have an input with a dropdown underneath. So when i click into an input the dropdown opens. But i can't select anything from the dropdown cause it is not focussed. So when i click on a value it doesnt get selected and the dropdown closes again because it looses focus. So i am now wondering how i can include the div into the focus of the input.
HTML input:
<input type="text" class="form-control myInput" [(ngModel)]="textToSort"
(keyup)="onKeyDownAction($event)" (blur)="onBlurEventAction()" id="{{id}}"
(focus)="focusFunction()" (focusout)="unFocusFunction()"/>
HTML div (dropdown):
<div class="data-container" *ngIf="showDropDown" style="position: absolute;" >
<p
*ngFor="let data of dataList; let i = index"
class="data-list"
(click)="updateTextBox(i,data[columnName]); focusOnInput();"
[ngClass]="{highlight:checkHighlight(i)}"
> {{data[columnName]}}</p>
</div>
Component:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
this.showDropDown = false;
}
blur event happens on your input because of mousedownon list item
So in order to prevent this you need to add
(mousedown)="$event.preventDefault()"
handler for your list items.
I created simple demo:
https://stackblitz.com/edit/angular-x3cdr1
Have you in your CSS, tried setting the z-index to 1 for the dropdown class when it is expanded?
Please share a plunkr or a stackblitz link to look at the scenario.
The simplest approach would be as follows:
focusFunction(){
this.showDropDown = true;
}
unFocusFunction() {
setTimeout(() => { this.showDropDown = false; }, 500);
}
I think checking this stackblitz would help also:
https://stackblitz.com/edit/angular-search-filter?file=app%2Fapp.component.ts
So I'm working with Angular and I'm trying to make a button that when clicked disappears. I have tried to use [hidden], (click)="showHide = !showHide", and a bunch of other methods. Nothing is working so far.
My html (currently):
<div class="rows">
<div class="a-bunch-of-styles-for-my-button">
<a type="button" class="more-styles" (click)="inboundClick = !inboundClick" [routerLink]="['/inbound']" href="">
</a>
</div>
</div>
and my component:
export class AppComponent {
inboundClick = false;
}
In essence I have 2 buttons on a page and when one button is clicked I want to hide both buttons and display a set of new buttons.
I'm very new to Angular and I'm very confused why this won't work.
Your HTML
<div class="yourCssClass" *ngIf="this.isButtonVisible" (click)="this.isButtonVisible = false">
...
</div>
Your TypeScript
export class AppComponent {
private isButtonVisible = true;
}
This should do the job. *ngIf automatically hides the element, if the condition evaluates false, so setting the variable to false is sufficient.
The problem I see here is, that you don't control the visibility at any point. Using [ngClass] to add a specific class, if a condition is met, or *ngIf is helpful, whenever you try to change elements on user interaction.
For more information on [ngClass], you can read about its usage here: https://angular.io/api/common/NgClass
You can read about *ngIf here: https://angular.io/api/common/NgIf
Especially the "Common Use" part should be interesting for you.
Edit:
Reading your comment below it seems you did not notice what [hidden] and (click) actually do. [hidden] controls the visibility of the element, usually dependent on a certain condition. (click) however is a quick way to bind a Click-Event to your element.
Using both of those tools enables to hide an element, by changing a variable, if a user clicks on your element (the new value of the variable may be assigned by a function called by (click) or inline, as demonstrated in the example code).
Edit2: Yep, you meant Angular2/4 ;) So this should do the job.
Here is how you can achieve that:
In your component.html:
<a type="button" class="more-styles"
[hidden]="!inboundClick"
(click)="inboundClick = !inboundClick"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" class="more-styles"
[hidden]="!outboundClick "
(click)="outboundClick = !outboundClick "
[routerLink]="['/outbound']" href="">
</a>
... and in your AppComponent:
export class AppComponent {
inboundClick = true;
outboundClick = true;
}
PLUNKER DEMO
Here is a neat way to hide/remove items, specially handy if there is a list of items.
Note how it takes advantage of Angular's template variables (#ListItem).
So your template can either be something like:
<a type="button" #ButtonA
(click)="onClick(ButtonA)"
[routerLink]="['/inbound']" href="">
</a>
<a type="button" #ButtonB
(click)="onClick(ButtonB)"
[routerLink]="['/outbound']" href="">
</a>
Or like this:
<ng-container *ngFor="let item of list">
<div #ListItem>
<button (click)="onClick(ListItem)">
</div>
</ng-container>
Depending on how you want to hide - if you want to remove it from DOM, or just hide it with CSS. And depending if you want to toggle it or just remove it completely. There are a few options:
Remove element from DOM (no way to get it back):
close(e: HTMLElement) {
e.remove();
}
Hiding it with the hidden attribute - beware that the hidden attribute can be overriden by CSS, it will happen if you are changing the display property and the rule has more precedence:
close(e: HTMLElement) {
e.toggleAttribute('hidden');
}
Hiding it "manually" with CSS:
close(e: HTMLElement) {
e.classList.toggle('hide-element');
}
.hide-element {
display: none;
}
I'm at the moment working with Angular (4.0) and ng2-dragula. I've mad a div to a dragula container to move the items in it like this:
<div id="dragcontainer" [dragula]='"first-bag"'>
Now I'd like to implement the function to make my div to a dragable dragula div on button click. For example:
Before button click:
<div id="dragcontainer">
After button click:
<div id="dragcontainer" [dragula]='"first-bag"'>
I've tried this:
HTML-Button:
<button md-raised-button style="margin-left: 20px;" (click)="dragable()">
Make it drawable
</button>
TypeScipt Code:
dragable(): void {
document.getElementById("dragcontainer").setAttribute("[dragula]", "first-bag");
}
but that's not working. To ensure that I've used the .setAttribute command correctly I've tried this:
dragable(): void {
document.getElementById("dragcontainer").setAttribute("align", "center");
}
and that was working.
Has anybody tried this before or does anybody know how to solve this?
Perhaps you need some boolean flag in the controller that is triggered after button click, you should listen on drakeService.on('drag', listener) and if flag is set to false (initially) then you immediately trigger .cancel(true) method.
Would be much easier I think if you could provide some online demo (plunkr for example).
I am trying to put conditions for displaying a hidden div. I want that after entering some value in 'name' textbox and if we click on search link then the hidden block should appear. But in my code, if we click on search link first then enter any value in textbox then also the hidden div is appearing. But I need that only after entering value in textbox , if we click on search then only hidden div should appear.
Iam using below code for hiding the div-
<div ng-show="name.length>0 && IsVisible">
and in script I am writing this code-
$scope.isVisible = false;
$scope.ShowHide = function () {
//If DIV is hidden it will be visible and vice versa.
$scope.IsVisible = true;
}
I have created a plunker here-
https://plnkr.co/edit/oVwZONrn4gtQs1BaiMbO?p=preview
Can any one help me how can I achieve this?
You should add a condition in the method ShowHide itself:
$scope.ShowHide = function () {
if($scope.name) {
//If DIV is hidden it will be visible and vice versa.
$scope.IsVisible = true;
}
}
If you wish the hidden section to be visible only when 'Search' is clicked, then make changes as per following in the HTML file:
<div ng-show="IsVisible">
Refer to the demo here
Check this plnkr. Added a watch on name change:
<input type="text" name="name" class="form-control" ng-change="resetShowHide()" ng-class="" ng-model="name" required/>
and if the name length is 0, reset is IsVisible
$scope.resetShowHide = function(){
if($scope.name.length) $scope.IsVisible = false;
}
Basically, I want to put a inside . However, the ion-slide swipe is so sensitive, so I cannot scroll the content in . It just swipes to the next slide.
Is it possible to disable the swipe action in a certain area in ?
As shown in the picture, I want to disable the swipe action on the B area. I guess (if possible) I need to put some class in ion-scroll and/or div under it, but I could not figure it out.
This is my partial HTML code:
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
... // A area content
<ion-scroll direction="x" ...>
<div style="width: 5000px; height: 100px" ...>
// B area. Very wide content
</div>
</ion-scroll>
... // C area content
</ion-slide>
</ion-slide-box>
I really appreciate your help.
Here's another approach:
add these to the wide element:
<div on-touch="mouseoverWideDiv()" on-release="mouseleaveWideDiv()">
then in your controller:
$scope.mouseoverWideDiv = function() {
$ionicSlideBoxDelegate.enableSlide(false);
};
$scope.mouseleaveWideDiv = function() {
$ionicSlideBoxDelegate.enableSlide(true);
};
Here is another way of doing this:
In your controller add a function:
$scope.disableSwipe = function() {
$ionicSlideBoxDelegate.enableSlide(false);
};
In your view add the ng-init attribute on the slide-box element
<ion-slide-box ng-init="disableSwipe()">
This will disable the slide-event.
You can now use a controller function to slide to a given index like this:
Since google sent me here when i was searching for solutions using ion-slides (instead of ion-slide-box) i will leave here the solution i ended up using.
One thing first: ion-slide-box is currently deprecated, so you should use ion-slides now.
First set options variable in ion-slides element:
<ion-slides options="options">
Then inside your controller you should configure the options variable with the noSwiping options as follows:
$scope.options = {
noSwiping: true,
noSwipingClass: 'do_not_swipe',
}
And then, in an element inside your ion-slide-page add the "do_not_swipe" class to the element you want swipe to be disabled.
Taking your code as an example, you should have your html like this:
<ion-slides options="options">
<ion-slide-page>
... // A area content
<ion-scroll class='do_not_swipe' direction="x" ...>
<div style="width: 5000px; height: 100px" ...>
// B area. Very wide content
</div>
</ion-scroll>
... // C area content
</ion-slide-page>
</ion-slides>