i have $scope in function but this $scope cant show in html How To make it show ?
this code in fucntion
$scope.checkBrach = function(index) {
console.log($scope.dataBranch[index]);
$scope.branchCode = $scope.dataBranch[index].branch_code;
}
this code in HTML and {{branchCode}} dont show data for me
×
รายชื่อสาขา
choose
{{i.branch_code}}
{{i.branch_name}}
build
delete
Close
OK
<div aria-hidden="true" class="modal fade" id="delete-branch" role="dialog" tabindex="-1" ng-controller="contestCtrl">
<div class="modal-dialog modal-xs">
<div class="modal-content">
<div class="modal-heading">
<a class="modal-close" data-dismiss="modal">×</a>
<h2 class="modal-title">Modal Title</h2>
</div>
<div class="modal-inner">
<p>
<strong>{{branchCode}}</strong>
</p>
</div>
<div class="modal-footer">
<p class="text-right">
<button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">Close</button>
<button class="btn btn-flat btn-alt" data-dismiss="modal" type="button">OK</button>
</p>
</div>
</div>
</div>
</div>
In order to set the value for $scope.branchCode you must run the function $scope.checkBrach because the scope variable branchCode is being created inside that function or you could define your variable at the top of your controller like $scope.branchCode = "xyz branch code".
Related
Hi i'am a beginner in angular. I need to display a success message upon sending an email from modal popup and i'm trying to display the same in another popup.How can i display that?? my code part is
<div id="modalViewImportCode" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Email</h4>
</div>
<div class="modal-body" >
<p>Selectemail</p>
<div *ngFor="let primary of email; let i=index;">
<div *ngIf="primary">
<div class="clearfix">
<div class="margin-5-15">
<span class="pull-left modal3-checkbox">
<input type="checkbox" id="txt{{i}}" [(ngModel)]="primary.Current">
<label for="txt{{i}}"></label>
</span>
<span class="modal3-checkbox-label clsWordWrap width85per">{{primary.EmailAddress}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" (click)="sendMail()" class="btn btn-default">Send Email</button>
</div>
</div>
</div>
I tried something like below by butting below div under above code part
<div id="modalViewImportCodes" *ngIf="mailSent" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Email</h4>
</div>
<div class="modal-body">
<p>Sucess</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
sendMail() function triggers the mail.if success then "mailSent" become true.
thanks in advance.
Hi Jithin,
It very simple don't create new dialog, just use SweetAlerts after
your AJAX request completion these are very simple and easy. Trying
following steps.
Step 1:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Step 2:
Place in your desired location and change the message;
swal("Good job!", "You clicked the button!", "success");
References:
For more options and guidelines use the following URL:
https://sweetalert.js.org/guides/
Regards
I've got this project, a counter for a game... The idea is that when I click the "#buttonplay", it runs the jQuery function and hides the modal. That is all right, but after the modal is hidden, the function DisplayMoreInfo doesn't work... That function has to, when the user clicks on a specific game, provide more info about it.
I've got a game done without the function that runs after the #buttonplay is clicked, and it shows the info before I create a new game... But after, doesn't do anything...
This is my HTML:
<div id="contentplays" style="display: none">
<button type="button" id="buttonplay" data-toggle="modal" data-target="#myModal">
New Game
</button> <!--This button is to create a new play-->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New Game</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<!--Here it goes the info of the new game-->
</form>
</p>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submitnew" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!--This is the game WITHOUT the jQuery function of the #buttonplay-->
<div class="game done" onclick="DisplayMoreInfo(NewGame);">
<h1>NewGame</h1><br>
<p class="info">21/01/2017</p><br><br>
</div>
<div class="moreinfodone" id="NewGame" style="display: none">
<p class="person">Player 1: Pirulo</p>
<p class="person">Player 2: Zultano</p>
<p class="person">Player 3: Mengano</p>
</div>
</div>
And this is my JavaScript:
//The jQuery function
$('#submitnew').click(function () {
$('myModal').modal('hide');
//Some code here
});
//The function that does't work after the .modal('hide')
function DisplayMoreInfo(game) {
$(game).toggle();
}
Thanks in advance for any answer!!!
You might have to change this line of code from
onclick='DisplayMoreInfo(NewGame)';
To:
onclick='DisplayMoreInfo("#NewGame")';
Why did not work?
You are trying to pass NewGame to the DisplayMoreInfo function, which is at that point undefined.
Next time try to debug your code better using Chrome!
I have four grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.
I'm using modals for the first time, so I'm going directly based off the examples in Bootstrap's website. I have the following code being replicated four times with the only difference being the name of the button, the modal title, and the modal body. Can anyone tell me what I need to change in order to have four unique modals in the same page?
<div class="col-md-3">
<div class="head">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Button1</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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" id="myModalLabel">First Log</h4>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="mediumSpacer"></div>
</div>
Each modal should have a different id, the data-target for each button should be the id of each modal.
Example:
<div id="myModal1"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
<div id="myModal2"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
Each button should be something like:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Button1</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Button1</button>
I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
To avoid one static modal that will repeat itself within the loop, I added a dynamic id to the modal dialog :
<div class="modal-dialog" id="{{id}}" >
But it seems that this doesn't work . Here is my code :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
If your are in a loop, you must use different modal id, try :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}".
I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.
If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure
<?php
$id=0;//define on the top of your function
foreach()
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
<div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
<div class="modal-dialog"> <!-- Modal content-->
<div class="modal-content">
//Popup content
</div>
</div>
</div>
$id=$id+;//increase id value by for next iteration?>
endforech;
this title seems pretty common, but i can't find a correct answer for my problem from them.
I have a bootstrap template, and what i want to do is to pass some variable to a modal.
I'm using codeigniter and also smarty..
this is the code from my template:
<td><a class="btn mini red-stripe" href="#myModal3" data-id="{$frontuser->id}" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario "{$frontuser->username}"?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
i tried to find a JS file in order to analize it and see if i have to make some moedifications in there, but i didn't find a js that controls this. So, is this meaning that my modal is entirely managed by html?
if that's so..where do i put the variable in order to make the modal show this info?
thx
These look like PHP variables which you have to wrap in <?php [...] ?>.
Try this version
<td>
<a class="btn mini red-stripe" href="#myModal3" data-id=<?php echo $frontuser->id; ?>" role="button" data-toggle="modal">Eliminar</a></td>
<!-- modal -->
<div id="myModal3" class="modal hide fade" tabindex="-1" role="dialog" aria- labelledby="myModalLabel3" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> </button>
<h3 id="myModalLabel3">Eliminar Usuario Front</h3>
</div>
<div class="modal-body">
<p>Desea eliminar el usuario <?php echo $frontuser->username; ?>?</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cerrar</button>
<button data-dismiss="modal" class="btn blue">Confirmar</button>
</div>
</div>
<!-- end modal -->
If you are using a specific template and wish to stick to the templates syntax, you may do so accordingly. The above snippet should work regardless.
Cheers