I am using angular ui-bootstrap tabs for developing tabs.
But how I load tabbed data dynamically after each tab click.
I am able to load the static content. But I want to load data dynamically from ajax.
Each tab containing different HTML files.
controller
$scope.customerInfoTabs =
{
"General":[
"General",
"Employment",
"Relationship Status",
],
"Identification":[]
}
$scope.customerInfo = $scope.customerInfoTabs['General'];
template
<div class="well">
<div class="tabbable">
<ul class="nav nav-tabs">
<li ng-class="{'active': $index == 0}" ng-repeat="infotabs in customerInfo"><a showtab="" href= data-toggle="tab" ng-click="">{{infotabs}}</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>Howdy, I'm in Section 3.</p>
</div>
</div>
</div>
</div>
If you want to show dynamic content for each tab you will need to use $http service to fetch the html, then bind it using ngBindHtml.
Here is how:
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="loadData()">
<div ng-bind-html="tabDynamicContent"></div>
</tab>
</tabset>
The above example is a simplification where all the tabs will have the same html. Also make sure you include the ngSanitize module.
Here is the plunkr: http://plnkr.co/edit/Yege43KerzfFKE8k5OGc?p=preview
I think this question was answer by this stackoverflow:
first link or second link
So you could use a tab set in order to do the work you need.
Related
I'm writing my nice tabs panel with angular-ui bootstrap directives. Therefore I've included in my project, under a folder called "templates" the two html templates: tab.html and tabset.html. Their code, as it can be found also on GitHub is:
tab.html
<li ng-class="{active: active, disabled: disabled}" class="uib-tab nav-item">
<a href ng-click="select()" class="nav-link" uib-tab-heading-transclude>{{heading}}</a>
</li>
tabset.html
<div>
<ul class="nav nav-{{tabset.type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
<div class="tab-content">
<div class="tab-pane"
ng-repeat="tab in tabset.tabs"
ng-class="{active: tabset.active === tab.index}"
uib-tab-content-transclude="tab">
</div>
</div>
</div>
In my html file, in order to build the tabs panes, I have the following code:
<uib-tabset>
<uib-tab heading="Profile">
<ng-include src="'components/dashboard/profile_tab.html'"></ng-include>
</uib-tab>
<uib-tab heading="Projects">
<ng-include src="'components/dashboard/projects_tab.html'"></ng-include>
</uib-tab>
<uib-tab heading="Quotes">
<ng-include src="'components/dashboard/quotes_tab.html'"></ng-include>
</uib-tab>
<uib-tab heading="Reviews">
<ng-include src="'components/dashboard/reviews_tab.html'"></ng-include>
</uib-tab>
</uib-tabset>
Now, the thing is that the tab.html template is correctly used, and I see all my tabs heading, as specified in my html file. However, I don't see any of the tabs content.
By playing with the content of tabset.html, I've managed to load the 4 tabs content, substituting the ng-repeat="tab in tabset.tabs" with ng-repeat="tab in tabs" (don't ask me why it works cause I don't know...) but the tabs content display all together, since they all happen to have the active class applied... any clue what I'm doing wrong??
Thanks!
I finally got it working, after several hours and thanks to the amazing ng-inspector Chrome plugin, which I wasn't aware of and I strongly recommend to anybody coding in AngularJS, especially if newbee like me.
The problem happears to be indeed in the template tabset.html, I changed it this way and it worked
<div>
<ul class="nav nav-{{type || 'tabs'}}" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude></ul>
<div class="tab-content">
<div class="tab-pane"
ng-repeat="tab in tabs"
ng-class="{active: tab.active}"
uib-tab-content-transclude="tab">
</div>
</div>
</div>
I have an html page and I have created 3 separate tabs using Bootstrap each having their own partials, imported using ng-include. Here is the code for the view -
<ul class="nav nav-tabs" role="tablist" id="dashboard-tabs">
<li role="presentation" class="active">Opportunity
</li>
<li role="presentation">Effort
</li>
<li role="presentation">Results
</li>
</ul>
<!-- Page content -->
<div class="tab-content">
<!-- Opportunity Tab-->
<div role="tabpanel" class="tab-pane fade in active" id="opportunity" class="container" >
<div ng-include="'partials/opportunityView.html'"></div>
</div>
<!-- Efforts Tab-->
<div role="tabpanel" class="tab-pane fade" id="effort" >
<div ng-include="'partials/effortView.html'"></div>
</div>
<!-- Results Tab-->
<div role="tabpanel" class="tab-pane fade" id="results">
</div>
</div>
As you can see, Opportunity view is the default focus view and it runs just fine. I have a directive inside the partial/template for Efforts tab (second tab), and inside that directive link's function I am using jquery to compute the width of a table row in directive's template. But on page load, it shows the width as 0. I think it may be because Efforts view is hidden on page load.
So, how can I solve this problem? Can I re compile directive code on Effort's page load or can I pause it's execution untill Efforts tab is on focus?
I am trying to implement a Kendo Tab Strip and that applies ui-router to display the contents of the tab. I can get the tab strip to display but not the contents using the ui-view. Anyone have an example of how to make these items work together.
Sample of my html.
<div class="main-template">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<div ng-controller="Navigation">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active" url="#/invoice">Invoice Management</li>
<li url="#/shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
I was not merging everything together as I should. In the li markup I should have used ui-sref instead of url.
<div class="main-template" style="margin-left: 10px;">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<!--<a ui-sref="invoice">Invoice</a>
<div ui-view></div>-->
<div ng-controller="Navigation">
<div kendo-tab-strip="tabs">
<!-- tab list -->
<ul>
<li class="k-state-active" ui-sref="invoice">Invoice Management</li>
<li ui-sref="shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
I downloaded the angular-ui-tree package and installed it in a webserver. I can bring up the example pages fine in my browser, but all the click actions on the buttons (to collapse/expand the tree, add node etc) do not work. I don't get any errors in firebug.
If I point my browser at the public page for the tree component ( https://jimliu.github.io/angular-ui-tree/index.html) it does work.
I did some debugging and found that the problem is when ng-repeat is called for a ui-tree-node element, an ng-click action does not work.
In the code below, the test() function is in my controller and it gets executed if I remove the ui-tree-node or ng-repeat tags.
<li ui-tree-node ng-repeat="node in mydata" >
<a ng-click="test()" >{{node.title}} </a>
</li>
Is this a bug in angular tree component?
Is there some way I can fix this in my environment?
The fix was to add the data-nodrag tag in the top level ui-tree-nodes element.
(adding data-nodrag in the li element also works).
You can use both:
click with toggle(this)
drag
together, just make sure that the element to expand/collapse ist not within the ui-tree-handle
<script type="text/ng-template" id="tree_renderer.html">
<div ng-class="{collapsed: collapsed}">
<div class="ctx_node"
ui-on-drop="onDrop($event, $data, ctx,node); active=false">
<span class="expanded"
ng-click="toggle(this)"
ng-class="{'collapsed': collapsed,'expanded': !collapsed}">
</span>
<span ui-tree-handle>{{node.title}}</span>
</div>
</div>
<ol ui-tree-nodes="" ng-model="node.nodes">
<li ng-repeat="node in node.nodes"
ui-tree-node ng-include="'tree_renderer.html'">
</li>
</ol>
</script>
<div ui-tree data-drag-enabled>
<ol ui-tree-nodes="" ng-model="node.nodes" id="tree-root">
<li ng-repeat="node in node.nodes"
ui-tree-node ng-include="'tree_renderer.html'"></li>
</ol>
</div>
Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller
function imageGalleryCtrl ($scope, $http) {
//get gallery info on click
$scope.getGallery = function(id)
{
$http.post('/beta/images/get_images',{'id': id}).success(function(data)
{
$scope.images = data.thisGal_images;
$scope.images.galID = id;
});
};
}
I add the ng-click to the element with jQuery
//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
How do I force Angular to compile this newly added ng-click?
Thanks!
HTML Modal:
This is the modal that is called when the gallery name is clicked.
<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h3>Create New Gallery</h3>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
Edit Image Gallery
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="home">
<?php include('create.php'); ?>
</div>
<div class="tab-pane fade" id="upload">
<?php include('upload.php'); ?>
</div>
<div class="tab-pane fade" id="edit">
<div class="span9">
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
{{image.orgName}}
</li>
</ul>
</div><!-- /span9 -->
</div><!-- /row -->
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
Close
Next
</div>
</div>
Update
So really attempting to do this the Angular way, and after some studies here is where I am at.
The controller is the same as above and I have updated the tabs on the modal as follows.
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
<a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
</li>
</ul>
If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.
Although I too think that you should try and find another approach, the answer to your question
How do I force Angular to compile this newly added ng-click?
is
// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));
// change ng-click
$('#button1').attr('ng-click','exec2()');
// compile the element
$compile($('#button1'))($scope);
See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview
Basically what I'm getting at is you want to probably make this happen:
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img
ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}"
alt=""
ng-click="getGallery(image.galleryID)"
>
{{image.orgName}}
</li>
</ul>
The problem is I'm unsure of the relationship between the settings.id and the galleryID for a particular image. If you can set up this relationship in the data so it just automatically binds you're in better shape.