I am developing Angular application where i have a button inside forloop on click open a context menu. I only want only one menu to be opened. currently multiple menus are left opened.
<div *ngFor="let i of items">
<p-contextMenu
[global]="false"
#cm
[model]="contextMenuOptions"
appendTo="body"
name="contextMenu"
>
</p-contextMenu>
<button
class="icon-button"
type="button"
(contextmenu)="openCm($event, cm)"
(click)="openCm($event, cm)"
(keyup.enter)="openCm($event, cm)"
>
<i class="far fa-ellipsis-v"></i>
</button>
</div>
openCm(event, cm) {
event.preventDefault();
event.stopPropagation();
cm.show(event);
return false;
}
put your context menu outside the loop and call the function that calls it inside the button that will work.
it happens that by being inside the loop it is creating a context for each row of your table
Related
I am using angular 1.3 with strap modal dialog and the form inside it.
There are 2 buttons: OK and Cancel.
Cancel works as expected - it closes the modal.
But on OK the dialog is not closed; however, the form is processed as expected.
The code below shows the model and the code which instantiates the modal dialog.
I am using button type=submit on OK to process the form.
The $modal.showTemplate has 2 parameters:
1) HTML (code below)
2) callback which shall know which button was used: OK or Cancel.
For some reason, this callback is invoked only on Cancel.
I tried to fix it by using ng-click="$close(true) on OK button
instead type=submit but it does not help.
Question: how to close the modal dialog on OK?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog ">
<div class="modal-content">
<div ng-controller="externalController">
<form
role="form"
name="detailForm"
ng-submit="submit()"
>
<div ng-controller="internalController">
... some form fields are here ...
<button class="btn" ng-click="$close(false)">
Cancel
</button>
<button class="btn" type="submit">
OK
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- invoking the modal defined above: -->
$modal.showTemplate(htmlTemplate,
function(confirm) {
console.log("callback confirm="+confirm);
if (confirm === true) {
console.log(" this point never achieved ... and modal dialog is not closed");
} else {
console.log(" this works as expected and modal dialog is closed");
}
},
);
Get rid of the submit type on your 'OK' button. Attach the ng-click directive to this same 'OK' button. On click your button will submit the form via '[externalController].submit()'. If submit() returns a promise then wait for it, otherwise then call the modal controllers 'close()';
<button class="btn" ng-click="functionThatSubmitsAndCloses()">
OK
</button>
And in your 'internal controller' you'll have that function defined on your scope
$scope.functionThatSubmitsAndCloses = function () {
[scope of externalController].submit();
$close(true); // close being defined on the instance of your modal's controller and not this internal controller.
}
Is this an older version of angular strap? I do not see showTemplate defined in their API.
I'm trying to make use of wj-popup inside an ng-repeat in an AngularJS application, but am having difficulty.
Basically, I've used the demo example for wj-popup and wrapped it in an ng-repeat as follows. I have an array of posts, each has a property that is its indexValue (post.indexValue).
Each button needs to have a different ID, so I expect that using post.indexValue should work, and it does set the button ID on each repetition correctly, but the calling function doesn't work and the popup doesn't appear, and I'm not sure what I'm doing wrong.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Issue is with id. Pop up is not working even if there is no ng-repeat and owner id starts with any number. Changing button id to "btn{{post.indexValue}}" worked for me. Try this fiddle.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="btn{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#btn{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder
I have in AngularJS a list with multiple entries and for each entry a button. When clicking the button, the application will do some stuff and after that was successful, the button should be disabled.
The interesting part in my template look like this:
<li ng-repeat="item in items">
<span>{{item}}</span>
<button ng-click="doSomeStuff(item)">Request</button>
</li>
I already tried to use the ng-if directive, but then of course every button will disappear.
Previously, I thought about a solution in raw Javascript or jQuery, because it is very easy just to modify the button by its id. But is there a solution provided by AngularJS?
Use ng-disabled as follows:
<li ng-repeat="item in items">
<span>item</span>
<button ng-click="doSomeStuff(item)" ng-disabled="item.disabled">Request</button>
</li>
Controller:
$scope.doSomeStuff = function(item) {
//do operations and finally set disabled to true for that button
item.disabled = true;
}
I am trying to open a modal window from an already opened modal window in Angular JS. Briefly, I have a home page, from the home page which is basically a list page, when a user double clicks on a record in the list, a modal window opens up which has got three buttons - Save, Delete & Cancel. Clicking on the Delete button requires to open another modal window which would let the user to delete that record. Following is the code for the same :
home.html : This is the main page having a grid displaying multiple records in list view
{
...........
.......... Grid rendering code starts her
<div class="table-body-container">
<table class="table table-hover table-without-bottom">
<colgroup ng-repeat="header in headers" class="{{header.columnSize}}" ng-show="header.selected">
<tbody ng-repeat="rccs in records">
<tr ng-repeat="ri in rccs.recordcodes">
..............
<td **ng-dblclick="editModal(ri)**" ng-show="headers[1].selected">{{ri.recordCodeType}}</td>
............
............
....
</tbody>
</colgroup>
</table>
</div>
...............
................
**<div ng-controller="ri.controller.EditCtrl"
class="modal fade"
ng-class="{'in' : editModalOpen}"
ng-include="'resources/ri/views/editRI.html'">**
</div>
.......................
}
In the above bold part, double clicking opens up a modal window. The .js part is below :
homectrl.js - the method editModal in this controller sets the editModalOpen to true which triggers the first modal window
{
......
.......
$scope.editModal = function(row) {
$scope.updateRow = row;
$scope.editModalOpen = true;
}
}
The template for the first modal window is "editRI.html" which has the following :
editRI.html
{
.........
......
<div class="modal-footer">
......Cancel button HTML
<button type="button" class="btn btn-primary" ng-click="deleteModal()">Delete</button>
...............
.........
**<div ng-controller="ri.controller.EditCtrl"
class="modal fade"
ng-class="{'in' : deleteModalOpen}"
ng-include="'resources/ri/views/deleteRI.html'">**
</div>
}
The above html in the editRI template is supposed to open another modal window on top of the existing modal window so that the user can perform a delete operation for the record. I have checked these links already and made the changes accordingly but it did not work :
- http://jschr.github.io/bootstrap-modal/ - I could not do much here as I also need to follow the standards that my team has followed in opening a dialog.
- Open Modal from Modal - This looked to be exactly the similar case as mine, but the answer was not clear enough. I tried putting the html for the 2nd modal window in a separate file and tried but dint work.
Can someone please give some pointers to me as per the above code ????