How can replace the {{eachTab.tabName}} with ng-bind in the following code?
<tabset>
<tab ng-repeat="eachTab in rowTabs" heading="{{eachTab.tabName}}"
select="createRecsforeachTab(dSet, eachTab)">
</tab>
</tabset>
You have answered! ngBind
The following code is from this post by #badsyntax
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" +
"");
}]);
Try moving the ng-repeat into the tabset scope like so:
<tabset ng-repeat="eachTab in rowTabs">
<tab heading="{{eachTab.tabName}}" ng-bind-html="{{eachTab.tabName}}" select="createRecsforeachTab(dSet, eachTab)"> </tab>
</tabset>
Related
I'm using Angular-Ui Bootstrap Tabset for AngularJS. I have 8 different tabs and all of them run a function when clicked. The activated tab is defined on the controller based on the object properties. The code is like this:
<tabset ng-if="paginaPronta">
<tab heading="Histórico" active="activeTabs.historico" disabled="beforeNew" select="tabHistorico('html')">
<div ng-include="includes.historico" class="row padding0"></div>
</tab>
<tab heading="Pedido" active="activeTabs.pedido" select="tabPedido('html')">
<div ng-include="includes.pedido" class="row padding0"></div>
</tab>
<tab heading="Documentos" active="activeTabs.documentos" disabled="beforeNew" select="tabDocumentos('html')">
<div ng-include="includes.documentos" class="row padding0"></div>
</tab>
<tab heading="Posse" active="activeTabs.posse" disabled="beforeNew" select="tabPosse('html')">
<div ng-include="includes.posse"></div>
</tab>
<tab heading="Despesas" active="activeTabs.despesas" disabled="beforeNew" select="tabDespesas('html')">
<div ng-include="includes.despesas" class="row padding0"></div>
</tab>
<tab heading="Faturação" active="activeTabs.faturacao" select="tabFaturacao('html')">
<div ng-include="includes.faturacao" class="row padding0"></div>
</tab>
<tab heading="Anexos" select="tabAnexos('html')">
<div ng-include="includes.anexos" class="row padding0"></div>
</tab>
<tab heading="Relatório" active="activeTabs.relatorio" disabled="beforeNew" select="tabRelatorio('html')">
<div ng-include="includes.relatorio"></div>
</tab>
</tabset>
Everything works fine at beginning but, when I change the location to navigate to another page, all 8 tab functions are called (tabHistorico(), tabPedido(), tabPosse()...)
I'm not calling the functions in any other place, I put the 'html' in every function and them made a console.log('tabHistorico: ' + phrase) on the controller and it gets printted tabHistorico: html. So, I know that all tabs are activated, I can't figure out why...
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".
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'm using the tabs in angular-ui using this controller:
$scope.panes = [
{ title:"Home", content:"home" , active: true},
{ title:"Settings", content:"settings"},
{ title:"View", content:"view"}
];
and this in the html file:
<tabs>
<pane
active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes"
>
{{pane.content}}
</pane>
</tabs>
but i want to set the content as a template how can I do that, I tried setting the ng-include code in this plunker, but didn't work.
Thanks in advance.
update:
if you find this solution and you'r not using angular-bootstrap v0.12 you need to update the code to the new syntax of v0.13 like this:
<tabset>
<tab
active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes"
>
<div ng-include="pane.content"></div>
</tab>
</tabset>
I already updated the plunker to have the syntax of the angular-bootstrap v0.13.
Just add the ng-include as a child of the pane
<tabs>
<pane active="pane.active"
heading="{{pane.title}}"
ng-repeat="pane in panes">
<div ng-include="pane.content"></div>
</pane>
</tabs>
The reason this works is that the scope variable pane is not yet available when you use the ng-include in the same element as the ng-repeat that creates the pane variable.
This is because the priority value of the ng-include is 0(the default) while the priority of the ng-repeat is 1000 and so the order of execution is:
ng-include
ng-repeat
See the directive docs