I have the following script template that I use to display a modal dialog inside a div element.
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Export a Table</h3>
</div>
<div class="modal-body">
<h3>Select Entity</h3>
<select id="selected-entity" >
<option ng-repeat="num in entities" value={{num}}></option>
</select >
<h3>Select Environment</h3>
<select id="selected-environment">
<option ng-repeat="e in envs" value={{e}}></option>
</select>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open()">Create</button>
<button class="btn btn-default" ng-click="open()">Export</button>
<button class="btn btn-default" ng-click="open('sm')">Import</button>
</div>
When I perform a console.log on the two objects (entities, and envs) for which I am calling ng-repeat, I am able to successfully log their contents to the console. Their content, however, is not displayed in the modal dialog that I pop up.
I'm new to Angular and any help would be greatly appreciated.
Its better to use ngOptions to achieve this, but if you still want to do it with ng-repeat then see the following plunker.
<select>
<option ng-repeat="e in envs">{{e}}</option>
</select>
Please follow the plunker link for code.
Plunker
Related
I'm trying change text and value of element when I submit modal which opened by clicked a tag event, but I still dont know how to do it. Picture below describe my idea.
I tried delete and replace html but it doesn't work, I am still stuck.
Thank you so much.
This is my code:
<div class="report-filter-selector">
<span class="badge rounded-pill bg-info">
<a
class="openEditModalBtn"
data-toggle="modal"
data-field="form_name"
data-value="request_all"
href="#editFilterSelectorModal"
>form name: request_all</a>
<button
class="selector-control-btn" id="selector-control-btn"
><i class="fas fa-times"></i>
</button>
</span>
<input type="hidden" name="form_name" value="request_all">
</div>
<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static"
tabindex="-1" aria-labelledby="editFilterSelectorModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="add_body">
<div class="message-content" name="error" id="add_err"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Condition:</label>
<select name="edit_field_selector" id="edit_field_selector"
onchange="loadValueByCondition();" disabled>
<option value="form_name">form_name</option>
<option value="prefecture">prefecture</option>
<option value="time">Time</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Value:</label>
<div id="edit_value_by_selector" class="edit_value_by_selector"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
id="edit-filter-selector-submit"
name="edit-filter-selector-submit">保存
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"
id="close-new-form">閉じる
</button>
</div>
</div>
</div>
</div>
As my fault, I forgot upload Javascript code, that is my code to create element and try to change after modal edit submit.
//this code create <a> element like number 1 in picture
$('#add-filter-selector-submit').click(function(e){
let condition = $('#add_field_selector').val();
let val = "example1";
let html = '<td><div class="report-filter-selector">';
html += '<span class="badge rounded-pill bg-info"><a class="openEditModalBtn" data-toggle="modal" data-field="'+condition+'" data-value="'+val+'" href="#editFilterSelectorModal">'+condition+':'+val+'</a> <button class="delete-selector-control-btn" id="delete-selector-control-btn"><i class="fas fa-times"></i></button></span>';
html += '<input type="hidden" name="'+condition+'" value="'+val+'">';
html += '</div></td>';
$("#filter_conditions_table tr:first").append(html);
});
//this code try to change element when submit edit modal:
$('#edit-filter-selector-submit').click(function(e){
// I dont know how to do next
});
I've had to assume that your second select is created using similar naming conventions to your first one in your example HTML. You can use the code below to
Select a button (replace #edit-filter-selector-submit") and run a function when it is clicked
Change the value of a select using .val() - you need to pass the value you want to switch to
// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {
// Change the value of the select item $("#edit_value_selector").val("2");
});
// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {
// Change the value of the select item
$("#edit_value_selector").val("2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="report-filter-selector">
<span class="badge rounded-pill bg-info">
<a
class="openEditModalBtn"
data-toggle="modal"
data-field="form_name"
data-value="request_all"
href="#editFilterSelectorModal"
>form name: request_all</a>
<button
class="selector-control-btn" id="selector-control-btn"
><i class="fas fa-times"></i>
</button>
</span>
<input type="hidden" name="form_name" value="request_all">
</div>
<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static" tabindex="-1" aria-labelledby="editFilterSelectorModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="add_body">
<div class="message-content" name="error" id="add_err"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Condition:</label>
<select name="edit_field_selector" id="edit_field_selector" onchange="loadValueByCondition();" disabled>
<option value="form_name">form_name</option>
<option value="prefecture">prefecture</option>
<option value="time">Time</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Value:</label>
<div id="edit_value_by_selector" class="edit_value_by_selector">
<select name="edit_value_selector" id="edit_value_selector" onchange="loadValueByCondition();" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="edit-filter-selector-submit" name="edit-filter-selector-submit">Change
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-new-form">Close
</button>
</div>
</div>
</div>
</div>
Hi you can use this code with javascript.
Add function to button change:
function change() {
$("#edit_field_selector2").val('1').change()
$("#edit_field_selector").val('prefecture').change()
}
There's a button which calls bootstrap modal open(content) on html page. Requirement is to need to pass the size of the modal too ('sm','lg').
Using Angular 2 Bootstrap Modal. can anybody help me on this .
html :
<button class="btn btn-primary btn-add" (click)="open(content)">Add</button>
<ng-template #Deletecontent let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title">Delete Device</h4>
</div>
<div class="modal-body delete-modal">
<p>Are sure you want to delete this device/devices?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-cancel" (click)="c('Close click')">Cancel</button>
<button type="button" class="btn btn-primary btn-add" (click)="deleteDevices()">Delete</button>
</div>
</ng-template>
You can use ng-class. Like..
[ngClass]="'style1'"
Use it in your div and apply condition on model open.
In your function open
open(content: any) {
this.modalService.open(content, { size: 'lg' });
}
I am calling an alert box but the requirement is that I've to display some information in that box and take a little bit of input from user.
I have a heading, select options to get the reason from user and confirm button and a delete button.
Here are these elements
<div style="width:50%;margin-left:auto;margin-right:auto;border:1px solid;padding:20px">
<h4 style="margin-top:0px">Alert</h4>
<p>
Please select a reason from the list. <i>(required)</i>
</p>
<select style="width:100%">
<option></option>
<option>Reason one</option>
<option>Reason two</option>
<option>Reason three</option>
</select>
<div style="float:right;padding-top:10px">
<button type="button">Confirm</button>
<button type="button">Close</button>
</div>
</div>
Is it possible to put this much information in alert box? Thanks in advance!
In my opinion, there's no support to display that much information in alert box. However, you can use bootstrap modal for that purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<link data-require="bootstrap-css" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<script data-require="jquery" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script data-require="bootstrap" data-semver="4.0.0-alpha.2" src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Call Alert Box
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Alert</h4>
</div>
<div class="modal-body">
<p>Please select a reason from the list. <i>(required)</i></p>
<select style="width:100%">
<option></option>
<option>Reason one</option>
<option>Reason two</option>
<option>Reason three</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Save changes</button>
<button type="button" class="btn btn-primary">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>
It is not possible to do your requirements with an javascript alert box. Only javascript default function to get input is prompt (scroll down to prompt):
window.prompt("sometext","defaultText");
Your approach to display it in a lightbox/overlay is good. You could lay it over your website content.
Like #Tikkes mentioned in your question comments, jQuery Dialog might help you.
Select2 open select list behind dialog modal window. Chrome 49.
<dialog id="hello" class="alert">
<div style="padding:10px">
Imagine some great content here.
</div>
<div class="linksTable">
<select name="wpmse_options[social_list]" id="mse_social_list" class="input-block-level wpmse_select2" required>
</select>
</div>
<footer>
<div class="toolbar-actions">
<button id="cancel" class="btn btn-default">Cancel</button>
<button id="save" class="btn btn-primary pull-right">Save</button>
</div>
</footer>
</dialog>
http://jsfiddle.net/memoris/f0sma9tf/6/
Can you please take a look at this demo and let me know why the
$(".onealert").on("click",function(){
alert("You clicked on A");
});
is not functioning?
here is the code I have :
<div class="the-box">
<div class="pull-right btn-group btn-group-sm" id="downloadSelect">
<button type="button" class="btn btn-default">1</button>
<button href="#" class="trigger btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="head hide">Alphabet Select</div>
<div class="content hide">
<div class="form-group">
<div class="btn-group btn-group-sm">
<button type="button" id="1Download" class="btn btn-default onealert">A</button>
<button type="button" id="2Download" class="btn btn-default">B</button>
<button type="button" id="3Download" class="btn btn-default">C</button>
</div>
</div>
</div>
</div>
I am not getting any error message too!
Thanks
That's because Bootstrap builds new markup for the little dialog as it appears, using the hidden markup as a template only, which means it's dynamic content that didn't exist when you added the event handler, and you'll need a delegated handler
$('.the-box').on("click", ".onealert", function(){
alert("You clicked on A");
});
FIDDLE