Is there a more concise/pragmatic way to create tabbed widgets with angular that doesn't include ui.bootstrap? The tab module is fantastic but i'm trying to create a lean site built with stylus and I find that ui.bootstrap is rather complex and very intertwined with the Twitter bootstrap css. I dont have much experience with building directives, but would that be the best approach? After mixing a few examples that I found, this is what I came up with...
<div ng-app="app">
<div class="container" ng-init="selectTab='tab1'" ng-switch>
<ul class="tab-header">
<li ng-class="{active: selectTab=='tab1'}" ng-click="selectTab='tab1'">tab1</li>
<li ng-class="{active: selectTab=='tab2'}" ng-click="selectTab='tab2'">tab2</li>
<li ng-class="{active: selectTab=='tab3'}" ng-click="selectTab='tab3'">tab3</li>
</ul>
<div ng-switch on="selectTab">
<div class="tab-content" ng-switch-when="tab1">tab1 contents</div>
<div class="tab-content" ng-switch-when="tab2">tab2 contents</div>
<div class="tab-content" ng-switch-when="tab3">tab3 contents</div>
</div>
</div>
</div>
Codepen Example
Related
Faily new to the angular scene.
I have a toggle done in bootstrap below.
The toggle does not work when angular is simply added to the header with the <script src> tag
<li class="dropdown dropdown-quick-sidebar-toggler">
<a href="javascript:;" class="dropdown-toggle">
<i class="icon-logout"></i>
</a>
</li>
<div class="page-quick-sidebar-wrapper" data-close-on-body-click="false">
<div class="page-quick-sidebar">
<ul class="nav nav-tabs">
<li class="active">
Modules
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active page-quick-sidebar-chat" id="quick_sidebar_tab_1">
<div class="page-quick-sidebar-chat-users" data-rail-color="#ddd" data-wrapper-class="page-quick-sidebar-list">
<ul class="media-list list-items">
<li class="media">
<div class="media-body">
<h4 class="media-heading"><i class="fa fa-bank" aria-hidden="true"></i> Cash & Banking</h4>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Above works when angular is not introduced..but doesn't work when angular is included.
Any idea?
I also had the same problem when starting with angular, what fixed my problem was simply including a newer version of jquery.
Originally was using jquery 2.x and just changed it in my bower to 3.1.x
Apparently jquery was being loaded after angular was.
Loading jquery before angular simply corrected it.
So what I am trying to do is a form which is due to its length displayed over multiple pages. To realise this I am using different div's beeing displayed seperatly on one html page.
I am using angularJS and Bootstrap with this little piece of code:
It doesn't matter how I load this code. It's not working as first thing in a index.html file nor being loaded as a template with angularJS.
<div ng-controller="uploadCtrl">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#part1">Start</a></li>
<li><a data-toggle="tab" data-target="#part2">Step 2</a></li>
<li><a data-toggle="tab" data-target="#part3">Finish</a></li>
</ul>
<div class="tab-content">
<div id="part1" class="tab-pane fade in active">
<h3>Form part 1</h3>
<p>Some content.</p>
</div>
<div id="part2" class="tab-pane fade">
<h3>Form part 2</h3>
<p>Some content in menu 1.</p>
</div>
<div id="part3" class="tab-pane fade">
<h3>Form part 3</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
My problem is I can only click once on the links in the nav. There seems to be a problem with the toggle-function of class="active". Clicking on a link adds the active-class but it is never removed.
After clicking on every link they all look like this: <li><a data-toggle="tab" data-target="#part1" class="active" aria-expanded="true">Form part 1</a></li>
Plus none of my <li> are of class="active" after the first link-selection.
I am only using
jquery.min.js
bootstrap.min.js
bootstrap.min.css
npm.min.js
angular.min.js
I strongly recommend you to use angular-ui bootstrap for this. It has a special case for nested forms. Using bootstrap.js over angular that already provides DOM manipulations is a bit redundant and can cause unexpected behaviour.
<form name="outerForm" class="tab-form-demo">
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Form Tab">
<ng-form name="nestedForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required ng-model="model.name"/>
</div>
</ng-form>
</uib-tab>
<uib-tab index="1" heading="Tab One">
Some Tab Content
</uib-tab>
<uib-tab index="2" heading="Tab Two">
More Tab Content
</uib-tab>
</uib-tabset>
</form>
More info here
There seems to be something wrong with my libraries.
I switched to Bootstrap Version 3.3.6 and it worked perfectly. Earlier I used the current Version 4.0.0 from Bootstraps Homepage given through the standard download option.
I got this code from the Bootswatch website, it supposed to work just fine :
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li class="">Profile</li>
<li class="">Other</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade active in" id="home">
<p>Tab home!</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Tab Profile!</p>
</div>
<div class="tab-pane fade" id="other">
<p>Tab Other!</p>
</div>
</div>
But I'm using AngularJS routes, so the href links aren't working, I tried to replace href with data-target, but it doesn't work either. Please help, and is there a simple way to change the Tab class to active while active? Thank you.
You'll want to look into using Angular-UI for Bootstrap components like this. It gives you Bootstrap components like tabs that have been written specifically for AngularJS applications. Check out the "Tabs" section on that link.
I am using bootstrap with angularjs mainly because I want to user partials with my navbar
I have taken this template and added angularJS
http://ironsummitmedia.github.io/startbootstrap-landing-page/
Here is the navbar
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
Inicio
</li>
<li>
Servicios
</li>
<li>
Contactenos
</li>
</ul>
</div>
And below that are the divs with the content of the navbar options
<a name="services"></a>
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Death to the Stock Photo:<br>Special Thanks</h2>
<p class="lead">A special thanks to <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a> for providing the photographs that you see in this template. Visit their website to become a member.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/ipad.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
When I click on the Servicios (#services) is taking me to
http://localhost:8080/index.html#/services
instead of taking me to
http://localhost:8080/index.html#services
a / was added between # and services
I have nodejs installed and running http-server (npm pakckage) for testing purposes
I found the solution
When creating the links use two ## and the target="_self"
Question 1
Question 2
Question 3
And use the id attribute in your html elements like this:
<div id="faq-1">Section 1</div>
<div id="faq-2">Section 2 Content></div>
<div id="faq-3">Question 3</div>
There is no need to change any routing or anything else
Why the tabs are not shown with AngularJS tabbale directive.
http://plnkr.co/edit/yu0Bh0?p=preview
This is optional part of angularJS, which is used everywhere in the docs (here)
The source of the directive is here.
I don't see any special css in the doc site.
EDIT:
the markup of the plunkr (above) was copied from the doc link given above.
But, when tried with the markup on Angular main page (angularjs.org), it works.
Not sure how it works at doc site.
The working markup has data-toggle attributes, and url fragments to tab pane.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="">index.html</li>
<li class="">project.js</li>
<li class="">list.html</li>
<li class="active">detail.html</li>
<li class="">mongolab.js</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="project-html">
<h1>project</h1>
</div>
<div class="tab-pane" id="project-js">
<h1>project js</h1>
</div>
<div class="tab-pane" id="list-html">
<h1>project html</h1>
</div>
<div class="tab-pane active" id="detail-html">
</div>
<div class="tab-pane" id="mongolab-js">
</div>
</div>
</div>
There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).
In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like
$(".tabbable").tabs();
in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.