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!!
Related
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>
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>
I have a form with various kinds of inputs, text, drop downs, radial buttons, sliders, and checkboxes. My "Reset" button is outside of the form (above the form). Is there a way to click the button and set all of the inputs back to default?
I have a Twitter Bootstrap accordion, with the reset button on the accordion header. The form is below inside of the accordion. I want to be able to clear the form whether the accordion is expanded or collapsed.
Example:
Accordion heading (Expanded) Reset
input fields
Accordion heading (collapsed) Reset
My reset is in my html like so:
<a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh" title="Reset" ></i></a>
and I was trying to do this in my javascript file:
#icon-Reset.click(function(){
$('#form').get(0).reset();
});
but I cannot get anything to work.
To be more clear, here is the top of the html that has the above html line in it:
<div id="side-bar-container">
<div id="sideBar">
<div class="accordion" id="mainAccordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#mainAccordion" data-target="#collapseOne"> <i
class="icon-chevron"></i>Accordion Heading1
</a>
<a id="icon-Reset" href="#form" class="btn-mini" type="reset"><i class="icon-refresh" title="Reset" ></i></a>
</div>
<div id="collapse" class="accordion-body collapse in">
<div class="accordion-inner scrollable">
<div id="Accordion1">
<form id="form"class="form-search form-horizontal">
<fieldset>
I am VERY new to Javascript, HTML, etc, so please be detailed...Thanks!!
Your approach was correct, but you have to attach form reset action to the click event of your button. It can be any control, assuming it's a span with id "reset"
<span id="reset">Reset</span>
You can make clicking on it reset form with id "form" like this:
$('#reset').click(function() {
$("#form")[0].reset();
})
This code attaches action to span's "onclick" event and inside of action gets the form and resets it. Here's a small demo - fill the form and then click Reset:
http://jsfiddle.net/29ewk/
I have a list of items, and upon clicking on one of the items, a modal dialog is displayed for the user to make some changes and click either "Close" or "Save changes".
The problem is that say that user makes some changes and clicks on "Close", the changes would have been reflected in the model the view is bound to, since data-binding is instant.
My question is then, how do I either defer the updates and only perform binding when "Save Changes" is clicked, or somehow forget the changes if "Cancel" is clicked.
The code for my modal dialog is like so:
<div ui-modal class="fade static" ng-model="modalShown" id="myModal" data-backdrop="static">
<div class="modal-header">
<button type="button" class="close" ng-click="closeModal()" aria-hidden="true">×</button>
<h3>{{selectedClientFeature.feature.type}}</h3>
</div>
<div class="modal-body">
<ul class="unstyled columnlist">
<li ng-repeat="country in countriesForEdit">
<input type="checkbox" ng-model="country.selected"> {{country.name}}
</li>
</ul>
</div>
<div class="modal-footer">
<a ng-click="closeModal()" class="btn">Close</a>
<a ng-click="saveChanges()" class="btn btn-primary">Save changes</a>
</div>
</div>
Thanks,
Shaun
The angularjs doc use to have an example of just this situation. What you would need is to clone your model (see angular.copy), prior to showing your edit modal, and when a user clicks on closeModal() you would reassign your model to the cloned value. IMHO, i would rename your 'Close' button to 'Cancel' and put it to the right of 'Save Changes', this is more explicit and seems to be the way many sites work.
Hope this helps
--dan
To automate manual cloning/updating model I came up with lazy-model directive.
See https://stackoverflow.com/a/20643001/740245