I am trying to implement Bootstrap Modal from http://angular-ui.github.io/bootstrap/ (pls. search for Modal). The templateUrl refers to myModalContent.html. But, I could not find this file. Can someone shed some light on this file?
Thanks in advance!
It is a template written in a script tag
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item = item">{{ item }}</a>
</li>
</ul>
Selected: <b>{{ selected.item }}</b>
</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>
Related
I have to remove the image from the list in the conformation model click on the YES button but after 2nd time model is not open.In the element section after 2nd time click "
<span class="glyphicon glyphicon-remove-sign" data-toggle="modal" data-target="#openImage"></span>
<div id="openImage" class="modal in">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Are you sure???</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this product?</p>
<div class="row">
<div class="col-12-xs text-center">
<button class="btn btn-primary btn-md" ng-click="removeSelectedProductKey($event, productObject.keyId)"> Yes</button>
<button class="btn btn-default btn-md" data-dismiss="close">No</button>
</div>
</div>
</div>
</div>
</div>
</div>
display :none" is apply tell me sir how to resolve this problem?
Try to open your modal by function using:
<span class="glyphicon glyphicon-remove-sign" ng-click="openImg()"></span>
And inside your controller write below function:
function openImg(){
angular.element('#openImage').modal();
}
In my application i used angular ui-tree.
Now to add new node i used below code
<button class="btn btn-info btn-circle btn-sm" type="button" ng-click='x.tasks.push({task: "New Task",depth:"2", tasks:[]})' style="margin-top:15px" data-nodrag><i class="fa fa-plus"></i></button>
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle class="tree-node tree-node-content">
<div style="width:100%">
<div style="width:87%;display: inline-block">
<a class="" style="color:#c1c1c1" data-nodrag ng-click="toggle(this)"><span class="fa" ng-class="{'fa-plus': collapsed, 'fa-minus': !collapsed}"></span>
<span class="label label-info"><i class="fa fa-tasks"></i></span> </a>
<span style="width:80%;word-wrap: break-word" class="remove-editable-click cursor-pointer" editable-text="node.task" buttons="no" e-ng-model="WBSData.task" e-ng-blur="changeFieldEdit(this)" e-required data-nodrag e-style="border:1px solid #DDDDDD;width:90px">
{{node.task}}
</span>
</div>
<div style="width:10%;display: inline-block">
<input icheck type="checkbox" ng-model="node.WBSDataSelectedTask" checklist-value="node.task" style="float:right" value="none">
</div>
</div>
</div>
<ol ui-tree-nodes="" ng-model="node.subtasks" ng-class="{hidden: collapsed}">
<li ng-repeat="node in node.subtasks" ui-tree-node ng-include="'nodes_renderer1.html'">
</li>
</ol>
</script>
<div ui-tree="treeOptions" id="tree-root">
<ol ui-tree-nodes ng-model="x.tasks">
<li ng-repeat="node in x.tasks" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
By clicking on button it is adding node but adding node at bottom.I need to add that on top.How can i do that?
x.task.push adds item at the end of the array. That's where you need to change
ng-click='x.tasks.push({task: "New Task",depth:"2", tasks:[]})'
Use unshift instead.
ng-click='x.tasks.unshift({task: "New Task",depth:"2", tasks:[]})'
For reference: How can I add new array elements at the beginning of an array in JavaScript?
I cannot get tabs to work on the inside of my modal no matter what I do. If it matters the modal is within a ng-repeat with angularJS and the modal id is being called dynamically
<!--======== Trigger ========-->
<a data-toggle="modal" href='#{{faIcon.iconSelect}}'>Trigger Modal</a>
<!--======== modal ========-->
<div class="modal fade" id="{{faIcon.iconSelect}}">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="fa fa-fw">{{faIcon.theIcon}}</i>{{faIcon.name}}</h4>
</div>
<div class="modal-body">
<h1><i class="fa fa-fw">{{faIcon.theIcon}}</i></h1>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist" id="myTab">
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="1">1</div>
<div class="tab-pane" id="2">2</div>
<div class="tab-pane" id="3">3</div>
</div>
</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>
<input ng-copy="copied=true" ng-init="copied=false; value='copy me'" ng-model="value">opied: {{copied}}
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--======== modal ========-->
Am i missing an init code or something
according to my tests it seems that you don't have any problems with the code so the problem is probably on another line of your code.
The easiest but most common things that make this kind of thing happen is that you probably forgat to close some tag..
<div ui-modal class="fade" ng-model="campaignSettings" data-backdrop="static" data-keyboard="false">
<div class="modal-header">
<a class="close" ng-click="campaignSettings=false">x</a>
<h3>Link Settings</h3>
</div>
<div class="modal-body">
text
</div>
<div class="modal-footer">
<a class="btn btn-default" ng-click="campaignSettings=false">Close</a>
</div>
</div>
by using angular + bootstrap2
now this ui-model is not working with bootstrap3
any solution ?
There's a branch with templates for Bootstrap 3:
https://github.com/angular-ui/bootstrap/tree/bootstrap3
You can use those; see a basic demo.
I am using rails to build my app. Tried to popup a modal box with angularstrap http://mgcrea.github.io/angular-strap/#/modal they are giving example of using modal box with partials.But I want to call a div from same page.they mention something with ng-template.But I didn't get any documentation for that. Anybody know about this??
You can read about ng-template here in the AngularJS docs. Implement it as follows:
<script type="text/ng-template" id="modal-template.html">
<div>Content of Modal</div>
</script>
Then where you're calling the modal, replace the reference to the partial with modal-template.html:
<button data-toggle="modal" bs-modal="'modal-template.html'">Call to Action</button>
In the main html page define your TemplageCache as follows:
<script type="text/ng-template" class="modal" id="/myTmpl.html">
<div class="modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" aria-label="Close" ng-click="$hide()">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title">This title</h4>
</div>
<div class="modal-body">
This is content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
</div>
</div>
</div>
</div>
</script>
Then in javascript
$scope.showMyModal=function(){
var myModal = $modal({placement:'center', animation:"am-fade-and-scale", templateUrl:'/myTmpl.html', show: true});
}
An ng-template would be if you had a inline (html string in javascript) variable. For example:
var t = "<div></div>";
t could be your ng-template.
Unforunately I don't know how to do what you are looking for.