I have set up a Plunker here to demonstrate my app:
http://plnkr.co/edit/iIJVuIxspDRedN7ZXiTK?p=preview
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" select="getContent()" active="tab.active" disabled="tab.disabled">
<div ng-hide="!tabs.isLoaded">
<h1>{{tab.title}}</h1>
<div ng-repeat="item in tabs.content">
<p>{{item}}</p>
</div>
</div>
<div ng-hide="tabs.isLoaded"><h3>Loading...</h3></div>
</tab>
</tabset>
What I would like to do is only show the relevant content under each tab, at the moment the way I have set it up is I am pulling in all content in both tabs.
What is the best way to configure this?
Thanks in advance!
Change this $scope.tabs.content=res.data;
to
$scope.tabs.content=res.data[0].fruit;
Here is updated plunker
http://plnkr.co/edit/5Ng9PHkrluKUSzQhor34?p=preview
Related
Facing a weird issue, where a simple text field value is not getting printed when using tabset. Wrote a sample to demo the same. Please check it below link
sample link
<tabset>
<tab heading="Static title">Testing input
<input ng-model="nameStr" value="">
<button class="btn btn-default btn-lg " type="button" ng-click="callMe()" >Test callme</button>
</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
Do suggest, what would have been missed out.
Thanks in advance.
There is some questions about angular-ui way of encapsulate controllers inside it's directives (the idea is to have different controllers for different tasks). The problem, to access your "original" controller (and not the ones in the ui-bootstrap directive) you have to use the $parent in your view. Because the current $scope inside tabset is pointing to another controller.
So, it will become
<input ng-model="$parent.nameStr" value="">
I couldn't find the right explanation in the angular-ui repo, but this seems to get some ideas.
https://github.com/angular-ui/bootstrap/issues/2971
Older Answer
You can replace the $scope.nameStr inside the $scope.callMe for this.nameStr.
http://plnkr.co/edit/cUUQ9FQ0oEOmIltQTS2f?p=preview
My solution:
$scope.name = {};
$scope.callMe = function(){
alert('title ->'+$scope.name.str);
}
In html:
<input ng-model="name.str" value="">
Angular works much better this way. Using dot properties.
<tabset>
<tab heading="{{nav.label}}" ng-repeat="nav in vm.data" href="{{nav.url}}">
<tabset class="subnav">
<tab ui-href="{{item.state}}" href="{{item.state}}" heading="{{item.label}}" ng-repeat="item in nav.items">
</tab>
</tabset>
</tab>
</tabset>
I want to add href, but you can not click!
I used angular-ui-bootstrap and angular-route!
What can I do?
You are making a mistake it isn't 'ui-href' but "ui-sref" and give a state name to it.
sref is for "state reference".
When using a UI Boostrap tabset along with nested sticky states created with ui-router and ui-router-extras, I have an issue where navigating to a tab's state via URL will select the first tab along with the correct tab. It should only activate the tab whose state matches the URL route.
Here's what the tabset looks like:
<div style="position:relative">
<tabset>
<tab heading="Dashboard" ui-sref="LMS.Dashboard" ui-sref-active="active"></tab>
<tab heading="Modules" ui-sref="LMS.Modules" ui-sref-active="active"></tab>
<tab heading="Messages" ui-sref="LMS.Messages" ui-sref-active="active"></tab>
<tab heading="Settings" ui-sref="LMS.Settings" ui-sref-active="active"></tab>
</tabset>
<div ui-view="Dashboard" class="tab-content" ng-show="$state.includes('LMS.Dashboard')">
<h2>Dashboard</h2>
{{test}}
</div>
<div ui-view="Modules" class="tab-content" ng-show="$state.includes('LMS.Modules')">
<h2>Modules</h2>
</div>
<div ui-view="Messages" class="tab-content" ng-show="$state.includes('LMS.Messages')">
<h2>Messages</h2>
</div>
<div ui-view="Settings" class="tab-content" ng-show="$state.includes('LMS.Settings')">
<h2>Settings</h2>
</div>
</div>
I have a plunker here:
http://plnkr.co/edit/sQB58YKntDwNIUpAdLmT?p=preview
To see the issue, select a tab other than 'Dashboard', then reload the "live view" frame.
Another way is to open it in a window, switch the tab, then reload.
I have the same issue. Add active="false" to disable default behavior and use ui-sref-active to add active class.
<tab ui-sref-active="active" active="false">
Edit
While this method seems to works, it produces error because false is not assignable.
Edit 2
Combining ng-init with a local scope variable seems to do the trick.
<tab ui-sref-active="active" active="isActive" ng-init="isActive=false">
In your case, it might be simpler to just add an active variable for each tab. See this plunker:
http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview
I had exactly the same thing. After searching for while, I decided the "value" ui-bootstrap offers around tabs is not worth the effort. My simple manual implementation:
<ul class="nav nav-tabs">
<li ng-class="{active:$state.current.name == 'properties.edit.basic'}"><a ui-sref="properties.edit.basic">Basic</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.marketing'}"><a ui-sref="properties.edit.marketing">Marketing</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.rooms'}"><a ui-sref="properties.edit.rooms">Rooms</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.images'}"><a ui-sref="properties.edit.images">Images</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.rates'}"><a ui-sref="properties.edit.rates">Rates</a></li>
<li ng-class="{active:$state.current.name == 'properties.edit.availability'}"><a ui-sref="properties.edit.availability">Availability</a></li>
</ul>
<ui-view></ui-view>
I am wondering whether it is possible to write html inside an angularjs bootstrap tabset tab heading. I am trying to add a svg inside the title. I have created a quick snippet in plunker to try and demonstrate the issue I am having.
<tabset>
<tab heading="<span>hello</span><em>1</em>">One</tab>
<tab heading="Two">Two</tab>
<tab heading="Three">Three</tab>
</tabset>
http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU
any ideas?
thanks
Angular Bootstrap v0.14+
Angular Bootstrap v0.14 introduced new prefixes for most previously provided controls. The original answer below still applies, but you must use the new tag names uib-tabset, uib-tab, and uib-tab-heading.
<uib-tabset>
<uib-tab>
<uib-tab-heading>
<span>hello</span><em>1</em>
</uib-tab-heading>
One
</uib-tab>
<uib-tab heading="Two">Two</uib-tab>
<uib-tab heading="Three">Three</uib-tab>
</uib-tabset>
Angular Bootstrap < v0.14
You should be using the tab-heading element within the tab element if you want HTML within the heading (as shown in the example in the docs):
<tabset>
<tab>
<tab-heading>
<span>hello</span><em>1</em>
</tab-heading>
One
</tab>
<tab heading="Two">Two</tab>
<tab heading="Three">Three</tab>
</tabset>
Updated plunker here.
Since 2016
The accepted answer is ok for the ui-bootstrap prior version 0.14.0, since version 0.14.0 (2015.10.09) tabs use uib- prefix.
See changelog
So you have to replace all tags with uib- prefix
<uib-tabset>
<uib-tab>
<uib-tab-heading>
<span>hello</span><em>1</em>
</uib-tab-heading>
One
</uib-tab>
<uib-tab heading="Two">Two</uib-tab>
<uib-tab heading="Three">Three</uib-tab>
</uib-tabset>
You can give your TAB tag an id and then use jQuery to augment the html.
...tab id="myid"....
and then
jQuery("#myid").html("New Html")
[edit] Taylor Buchanan's answer is the correct answer!
Looking at the template used by the tabs directive, the headings content will be escaped: https://github.com/angular-ui/bootstrap/blob/192768e109b5c4a50c7dcd320e09d05fedd4298a/template/tabs/tab.html#L2
So it is not possible to use html in your headings.
You can create a work-around by re-defining the tab template like so:
angular.module("template/tabs/tab.html").run(["$templateCache", function($templateCache) {
$templateCache.put("template/tabs/tab.html",
"<li ng-class=\"{active: active, disabled: disabled}\">\n" +
" <a ng-click=\"select()\" tab-heading-transclude ng-bind-html=\"heading\"></a>\n" +
"</li>\n" +
"");
}]);
You will also need to nclude angular-sanitize.js to safely bind html contents.
Working Demo here: http://plnkr.co/edit/ep5f1GY12vSixT4xtxFy?p=preview
<li heading="Status" class="ng-isolate-scope var" ng-model="(var = 'active: active')" >
Status1
</li>
<li heading="Status" class="ng-isolate-scope var" ng-model="var = 'active: active'">
Status
</li>
</tabset>
I am using AngularUI tabs as seen in the following sample code below and in this plunker.
http://plnkr.co/edit/YlbrObH4sBlyUFZO2tZh?p=preview
<tabset class="tabbable tabbable-custom tabbable-full-width">
<tab class="active" heading="Latest Customers" href="javascript:;">
<div class="tab-pane active" id="Div1">
Pane 1
</div>
</tab>
<tab heading="Feeds" href="javascript:;">
<div class="tab-pane" id="Div2" href="javascript:;">
<div class="tab-pane active" id="Div3">
Pane 2
</div>
</div>
</tab>
</tabset>
As you can see in the plunker, when the mouse hovers over the "tab", the cursor does not change to your typical pointing finger. The anchor tag that angularui is rendering does not have a href value on it, therefore, it is considered invalid html. if i manually add href="javascript:;" , the cursor works like i want it.
My question is, how can i tell the directive to add a href to the anchor tag? any advice?
Thanks,
Dan
You could add a style that targets the tabs:
.nav-tabs > li > a {
cursor: pointer;
}
just write:
<tabset
class="tabbable tabbable-custom tabbable-full-width"
style="cursor: pointer;"
>
....
Mmh this is weird, I too am using angular-ui tabs in my project. I copied and pasted the exact code you provided and it works just fine.
(see bottom of http://wiredbeast.com/coolframework/docs.html#/activity)
I might remove it later so look quick.
So my guess is that it's something wrong with your bootstrap css. I'm using ui-bootstrap-tpls-0.6.0.min.js, bootstrap.js/css v3.0.0, and https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js for angular