I have created a sideMenu and one of the item inside it has a text on left, and a toggle (checkbox) on the right. Menu item is linked to a view, which has a list of items. Toggle is like a button, which allow user to clear the list, without having to go inside the view.
Earlier I had 'menu-close' attribute added to the menu item, so every time I click the toggle, it would change the value and close the side menu.
Now the issue is, after removing the 'menu-close' I can click on the toggle and menu stays open, but the menu-item link is not working. I have tried setting ng-click and href. If I set href, the item navigates to new view even if I click on toggle.
<ion-item class="item-toggle" ng-click="openNotifications()">
<i class="icon ion-android-notifications-none"></i>
Notifications
<label class="toggle toggle-assertive">
<input type="checkbox" ng-click="alert('notification on')">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
How can make sure that if I click on toggle it changes, and when I click on item it navigates to view?
You should just be able to add $event.stopPropagation() to the outer click event, click events propagate and bubble so that is why both are firing.
try this:
<ion-item class="item-toggle" ng-click="openNotifications()">
<i class="icon ion-android-notifications-none"></i>
Notifications
<label class="toggle toggle-assertive">
<input type="checkbox" ng-click="alert('notification on');$event.stopPropagation()">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
FIXED IT:
so you need the stop prorogation, you also need to add this to the css to make the toggle item clickable:
.item-toggle{
pointer-events:initial !important;
}
here is a ionic playground to show it working!
http://play.ionic.io/app/d9920eee107d
You could place the toogle inside a normal list-item, to prevent the toogle-item behavior.
<ion-item ng-click="show('click')">
Item
<label class="toggle">
<input type="checkbox" ng-model="state" ng-change="show(state)">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
Related
I am using bulma and vuejs, i want to have three bulma accordions. Namely, Accordion1 and Accordion2, Accordion3. I am able to make the three accordions simultaneously. But now i would like to display Accordion1 at first and have a Button inside it, which on click accordion1 should close and accordion2 should be displayed automatically, similarly for accordion2 i want to have a button inside , which onClick closes accordion2 and displays accordion3. I do not want to hide the preceding accordion. So that when the user reaches accordion3 , all the accordions are visible. how can i achieve this?
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion1</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion2</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
<BulmaAccordion>
<BulmaAccordionItem>
<h1 slot="title">Accordion3</h1>
<div slot="content">
<div class="field">
<button></button>
</div>
</div>
</BulmaAccordionItem>
</BulmaAccordion>
For Bulma + Vue, i would suggest Buefy with its Collapse with Accordion effect (doc link here). Basically you just need to use v-for loop for indexing, and trigger click event per button according index (e.g to open 2nd after click Btn1, make condition open to index 1 (starts from 0 in array), and open 0 and 1 indexes for Btn3 click)
Hope this helps.
In my Angular app I am using an md-icon as a trigger to open up an md-menu. This works as expected.
Now, within that opened menu I have another two buttons that I want to use to trigger different menu items to display within the original, open drop-menu.
The problem is, right now, whenever I click anywhere within the open menu it causes the menu to close. My question is, how can I keep the md-menu open in this case, so that I can click on an additional button within the open menu to filter the menu options further?
Here is my code:
<button [mdMenuTriggerFor]="menu" md-button class="right-btn md-button">
<md-icon class="arrow-center-align">arrow_drop_down</md-icon>
<md-menu #menu="mdMenu">
<ng-container>
<div class="left-menu-header">
<button md-button class="menu-load" (click)="displayStandardStages()">Standard</button>
</div>
<div class="right-menu-header">
<button md-button class="menu-load"(click)="displayExtraStages()">Extra</button>
</div>
<ng-container *ngIf="!isOpenStage()">
<ng-container *ngFor="let stage of openStages">
<ng-container *ngIf="selectedService?.stage?.stage !== stage.stage">
<button md-menu-item (click)="moveRecord(stage)">
<span class="md-menu-text capitalize">{{ stage.stage }}</span>
</button>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</md-menu>
</button>
And this is the section of code containing the buttons within the opened menu:
<div class="left-menu-header">
<button md-button class="menu-load" (click)="displayStandardStages()">Standard</button>
</div>
<div class="right-menu-header">
<button md-button class="menu-load" (click)="displayExtraStages()">Extra</button>
</div>
How can I prevent the opened mdMenu from closing when I click on one of these buttons within the opened menu?
You need to stop the click event from propagating back to the menu. You can do that very easily with a click handler:
(click)="$event.stopPropagation()"
The trick is in applying the click handler to the right element - if it's just the buttons that's the problem - apply it there. But if the whole menu is a problem, apply it to a base parent container (DIV). There's a discussion about that here.
Consider this code:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false">CLOSE</div>
</a>
</div>
</div>
</section>
I have an ng-click in the that element which changes the value of 'activeSection' to true. Inside of it, I have another button that can switch this back to it's initial value (false).
In the actual app, it would show or hide this child button based on a class added to the element,just to give you a little background what I'm trying to achieve.
When I click on the element, it does as I expect it to be: switch the value to 'true'. But when I click on the .back-button element with the other ng-click, it fails to register the changed value.
Why is that?
They're both inside the same controller, btw. If there's a solution that doesn't involve creating a new controller, it would be better.
If you click on your back button, activeSection will be false but then your event will be propagated to its parent so the ng-click of Section will be executed too and activeSection will be true again.
In order to make your code work, you should stop the propagation of the ng-click event after changing the value of your variable in your back-button.
Your code would look like this:
<section class="page-section about-us" scroll-bookmark="about-us" ng-click="activeSection=true" ng-init="activeSection=false">
<div class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
<div class="back-button" ng-click="activeSection=false; $event.stopPropagation();">CLOSE</div>
</a>
</div>
</div>
</section>
What you are doing wrong is that you are putting the close button inside the element which have already ng-click, that's why when you are clicking the close button, it executes the parent ng-click and stop propagation for all other click events happening simultaneously.
So, the possible solution is making another super parent of the elements and taking the close button out of the element which is making it visible when clicked and adding a ng-show directive to the close button.
Checkout the following snippet
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<section class="page-section about-us" scroll-bookmark="about-us" ng-init="activeSection=false">
<div ng-click="activeSection=true" class="page-content sub-content active-section">{{activeSection}}
<div class="page-border">
<a href="#" class="close-section"><img src="public/images/go-back-icon.png" />
</a>
</div>
</div>
<div ng-show="activeSection" class="back-button" ng-click="activeSection=false">CLOSE</div>
</section>
</div>
i'm using templates for a netbanking app (project at university) and try to implement a delete button for the templates.
Each list element is a button itself and changes the view on clicking one list element. Inside i repeatedly constructed a delete button.
The problem is, that each time i click the delete button, the view changes as well - is there any simple ng-click for instance, that deactivates the ui-sref when the delete button is clicked?
<div ng-model="chosentemplate">
<a class="item item-thumbnail-left" ng-repeat="template in Templatelist" ng-model="choosetemplate" ui-sref="tab.transactions({params:template.iban})">
<img ng-src="img/{{template.image}}">
<h2><b>{{template.name}}</b></h2>
<p ><b>IBAN</b> {{template.iban}}</p>
<button ng-if="deletePress" ng-click="deleteTemplates($index)" ng-model="deletethistemplate" class="button button-small button-assertive">
Löschen
</button>
</a>
</div>
Thanks a lot!!
In my angular app, I have objects that I'm getting from a REST API that I'm making into columns in a grid, sort of like an image gallery type thing.
Example:
The intent was for the entire grey area to be clickable, which opens a Details View modal. Then when you hit the Delete button, it opens a Delete Item modal. Both modals are opened with angular's ng-click.
However, since they are both in the same container (the grey, clickable one), whenever I click the Delete button, it opens up both modals instead of just the Delete Item one.
Is there any way to fix that, ala forcing the button to be in the 'front', such that clicking it will only open the correct modal?
Thanks!
Edit: The html looks something like this -
<div class="row">
<div ng-repeat="item in items" class="col-lg-3 col-md-6 col-xs-12">
<div class="item-container" ng-click="openDetailModal(item)">
<!--stuff-->
<button class="btn btn-danger pull-right" ng-click="openDeleteItemModal(item) />
</div>
</div>
</div>