I'm using bootstrap tab,I have two tabs(tab1,tab2), both tab contains a select2 dropdown. The first one works fine but the select2 dropdown in tab2 is not working.Here is my code.
HTML
<div ng-controller="myctrl">
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="active"><a data-toggle="tab" data-target="#tab1">Tab1</a></li>
<li><a data-toggle="tab" data-target="#tab2">Tab2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane fade in active">
<input type="hidden" id="test1"/>
</div>
<div id="tab2" class="tab-pane fade in active">
<input type="hidden" id="test2"/>
</div>
</div>
</div>
JS
myapp.controller('myctrl',function(){
var test1 =$('#test1');
$(test1).select2({
data:[{'id':1,'text':'None'},{'id':2,'text':'High'},{'id':3,'text':'Medium'},{'id':4,'text':'Low'}],
multiple: false,
});
var test2 =$('#test2');
$(test2).select2({
data:[{'id':1,'text':'None'},{'id':2,'text':'High'},{'id':3,'text':'Medium'},{'id':4,'text':'Low'}],
multiple: false,
});
})
please help me.
you shouldn't combine jquery and angularjs in this way.
Check out Bootstrap UI directives: http://angular-ui.github.io/bootstrap/#/tabs
Related
Usign AngularJS and bootsrap 3.I have 3 nav-tabs and with panels on them. How do i programatically prevent the tabs from changing to the next one if the user has not selected a customer or dvd's. On bot the customerSelect and dvdSelect tab's i have panel with a list where the user selects the customer anmd also a list of dvds.
<div class="row">
<div class="panel panel-default">
<ul class="nav nav-tabs">
<li class="active in"><a data-target="#customerSelect" data-toggle="tab">Customer</a></li>
<li><a data-target="#dvdSelect" data-toggle="tab">Dvd List</a></li>
<li><a data-target="#orderDetail" data-toggle="tab">Order Details</a></li>
</ul>
</div>
</div>
<div class="row">
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="customerSelect">
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade" id="dvdSelect">
</div>
</div>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade" id="orderDetail">
</div>
</div>
</div>
I have omitted much of the code within my tab content div's.
Using JQuery there are 4 different events for bootstrap tabs:
show.bs.tab // Occurs when the tab is about to be shown.
shown.bs.tab // Occurs when the tab is fully shown (after CSS transitions have completed)
hide.bs.tab // Occurs when the tab is about to be hidden
hidden.bs.tab // Occurs when the tab is fully hidden (after CSS transitions have completed)
A pseudo-example you could use:
$('.nav-tabs a').on('show.bs.tab', function(){
console.log('validation starts...');
if (correct!==true){
$('#tab1').tab('show');
}else{
$('#tab2').tab('show');
}
});
I am having different html page in every tab and i want the active tab active even after refresh using bootstrap if possible
<div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#TypeSettings">Type</a></li>
<li><a data-toggle="tab" href="#EvidenceSettings">Evidence</a></li>
<li><a data-toggle="tab" href="#OverallTypeSettings">Overall Type</a></li>
</ul>
<div class="tab-content">
<div id="TypeSettings" class="tab-pane fade in active">
<div ng-include src="'Templates/AdminSettings/TypeSettings.html'"></div>
</div>
<div id="EvidenceSettings" class="tab-pane fade">
<div ng-include src="'Templates/AdminSettings/EvidenceSettings.html'"></div>
</div>
<div id="OverallTypeSettings" class="tab-pane fade">
<div ng-include src="'Templates/AdminSettings/OverallTypeSettings.html'"></div>
</div>
</div>
If you want to remember last opened tab by user, then you have add some JS logic. You can store user last opened tab in a cookie for example.
I try to implement a tabs nav bar in my app. I use Bootstrap3 and follow this example Boostrap Tabs and Pills.
I have one tab (#home) that is presented every Time. The other tabs i want to generate when i click on addInput() function. I.e tab1, tab2, tab3.
I dont know exactly how to get the combination togther. How can i create a list element with href="#menu1" for the navbar and fitting id="menu1" for the content inside tab.
Here is my example CodePen.io
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label for="txtDevice" class="control-label">Form Field 1</label>
<input type="text" class="form-control" ng-model="info.name" id="txtDevice">
</div>
<div class="form-group">
<label for="txtIP" class="control-label">Form Field 2</label>
<input type="text" class="form-control" ng-model="info.ip" id="txtIP">
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="form-group tab-content">
<div id="home" class="tab-pane fade in active">
<h4>Home</h4>
<p>content</p>
</div>
<div ng-repeat="site in info.sites track by $index">
<h4>tab {{$index +1}}</h4>
<p>content</p>
</div>
</div>
</form>
<button ng-click="addInput()">+add more inputs</button>
{{info | json}}
<hr>
tags = {{tags | json}}
</div>
There were about four things wrong with your pen, that I have fixed here (http://codepen.io/anon/pen/eBRwev?editors=1010)
Your tabs navigation did not include an ng-repeat for the tab headings
<ul id="myTabs" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li ng-repeat="site in info.sites track by $index" class="tab-pane fade in">
<a data-toggle="tab" href="#tab-{{$index}}" >Tab #{{$index}}</a>
</li>
</ul>
You forgot to include jQuery and Bootstrap JS libraries which are required to use the bootstrap tabs.
You have to call the following snippet of JS to activate the bootstrap click handling on the tabs
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You're looking something like this?
id="{{ 'menu' + $index }}"
I am using Bootstrap and Angular and I have the following HTML:
<ul class="nav nav-tabs">
<li class="active"><a data-target="#" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I want to visualize both #tab1 and #tab2 when the "All" tab is clicked. How do I achieve this with Bootstrap and Angular?
I found the solution in this answer.
<ul class="nav nav-tabs">
<li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I just set the data-target of the "All" tab to a CSS class, that is present in all of my tabs. It doesn't have to be exactly 'tab-pane', you can use your own class - 'foo' or 'bar'. It's a nice and simple solution, as no external libraries are required to achieve this.
I have a trivial problem out there. I need to make a filter search on the page with input . I'm using a boonex platform. I need to insert the input tag and it should hide or show the DIV blocks wich depends of value of input. this is the a code of my HTML page:
<ul id="navtabsidebar" class="nav nav-justified nav-tabs">
<bx_repeat:tabs_name>
<li class="__status__">
<a data-toggle="tab" href="#__tab_name__"><i class="fa fa-__icon__"></i></a>
</li>
</bx_repeat:tabs_name>
</ul>
<div class="tab-content" ng-app>
<input type="text" ng-model="filter">
<bx_repeat:tabs>
<div id="__tab_name__" class="tab-pane __status__">
<bx_repeat:users_list>
<div class="memberUser">
__user_avatar__
__chat__
</div>
</bx_repeat:users_list>
</div>
</bx_repeat:tabs>
</div>
Does someone how any ideas? Thanks guys