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 ????
Related
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
I need to have an overall Show/Hide click to show or hide all the detail divs of a list of "panels" of data. Also within each panel, there is a Show/Hide click to individually show or hide that div of data.
I think that if the overall show/hide is clicked that the individual click values should be set equal to overall value when clicked. That way if the individual ones are changed, they are all set to show or hide when the main one is clicked.
This is how I tried to do that:
<div>- Hide All Details / + Show All</div>
<div class="tender-list" ng-repeat="row in tenders" ng-include="'tender/tender_panel.html'"></div>
Where the hide/show part of tender_panel.html is here:
<div>- Hide Details</div>
<div class="tender-details" ng-hide="hideDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
There is another table above the tender-bottom-table. Plus a another table after.
What is happening is that it works fine when initially loaded. The Hide All/Show All works. Then I click on the individual show/hides and they work. But then the All Show/All Hide no longer works and I don't see how clicking the individual links breaks things.
This app is Symfony2 with Angular and Bootstrap.
Any help would be greatly appreciated.
one thing you could try is to have a property flag in each tenders item that sets if it's shown/hidden and show the individual item based on if hideAllDetails + their flag is true:
<div>- <a href='#' ng-click="hideAllDetails = ! hideAllDetails;">Hide All
Details / + Show All</a></div>
<div class="tender-list" ng-repeat="row in tenders" ng-
include="'tender/tender_panel.html'"></div>
tender_panel.html:
<div>- <a href='#' ng-click="row.hideDetails = ! row.hideDetails">Hide
Details</a></div>
<div class="tender-details" ng-hide="hideDetails || hideAllDetails">
<table width="100%" id="tender-bottom-table">
<tbody>
...
</tbody>
</table>
</div>
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 use UI Bootstrap's modal dialog, inside an Angular controller, rendered inside an Asp MVC View.
Somewhere within the page, I embed modal div :
<div class="modal inmodal" id="newActivityModal" tabindex="-1" role="dialog" aria-hidden="true">
which is triggered by:
<button ng-disabled="vm.activityInputText.length == 0" type="submit" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#newActivityModal">
So the structure of the page is :
<!-- ng-module="xxx" -->
...
<!-- ng-controller="zzz" -->
...
<!-- button triggering modal -->
....
<!-- modal -->
The problem however is that when the page renders, the modal window div 'jumps out' of the div where it originaly was (inside the controller) and appears at the very bottom of the page, right before the body tag.
Since inside the modal I'm using {{}} bound to controller's scope, it breaks.
Am I doint this right ?
Funny fact : if I instead put this all (the controller, button, modal window etc.) inside an <ng-view> it works fine and modal stays where it was in the DOM.
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