I am developing a web page where the user needs to upload a file. I am using a general technique that sits on top of the \input type="file"\ element that enables me to style it better.
This works fine until I put it in a Bootstrap 4 tab where it appears that the element stops receiving it's Click event.
To demonstrate this I have an HTML page using Jquery and Bootstrap. I have the similar elements sitting inside and outside of the tab. When I click the 'Browse' button on the elements outside the tab it works as expect. However when I click on the 'Browse button inside the tab nothing happens. You need to select "tab 2" then "tab 1" to get the the first tab's content to appear.
There must something in the Bootstrap tab that is blocking this.
Can anybody point me in the right direction as I need to use tabs ?
<!DOCTYPE html>
<title>File Upload</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style>
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" id="tab1" data-toggle="tab" role="tab" aria-controls="tab1" aria-selected="true" href="#tab1Content">Tab 1</a>
</li>
<li>
<a class="nav-link" id="tab2" data-toggle="tab" role="tab" aria-controls="tab2" aria-selected="false" href="#tab2Content">Tab 2</a>
</li>
</ul>
<div class="tab-content" id="tabContent">
<div class="tab-pane fade show " id="tab1Content" data-toggle="tab" role="tabpanel" aria-labelledby="tab1">
<div class="row pb-5">
<div class="col-md-12">
<div class="input-group">
<p>Inside of tab</p>
<input type="file" id="fileUploader" name="fileUploader" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName" value="Choose file">
<div class="input-group-append">
<button id="browseButton" name="browseButton" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="tab2Content" role="tabpanel" aria-labelledby="tab2">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row pb-5">
<div class="col-md-12">
<div class="input-group">
<p>Outside of tab</p>
<input type="file" id="fileUploader2" name="fileUploader2" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName2" value="Choose file">
<div class="input-group-append">
<button id="browseButton2" name="browseButton2" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#browseButton').on('click', function () {
$('#fileUploader').click();
});
$('#fileUploader').change(function () {
$('#fileName').val($(this).val());
});
$('#browseButton2').on('click', function () {
$('#fileUploader2').click();
});
$('#fileUploader2').change(function () {
$('#fileName2').val($(this).val());
});
});
</script>
Please check below code snippet. Might be your HTML tags were not closed properly.
<!DOCTYPE html>
<title>File Upload</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
padding-top: 1em;
}
</style>
<div class="container">
<div class="row">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis reprehenderit occaecat anim ullamco ad duis occaecat ex.
<p>Inside of tab</p>
<input type="file" id="fileUploader" name="fileUploader" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName" name="fileName" value="Choose file">
<div class="input-group-append">
<button id="browseButton" name="browseButton" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Nulla est ullamco ut irure incididunt nulla Lorem Lorem minim irure officia enim reprehenderit. Magna duis labore cillum sint adipisicing exercitation ipsum. Nostrud ut anim non exercitation velit laboris fugiat cupidatat. Commodo esse dolore fugiat sint velit ullamco magna consequat voluptate minim amet aliquip ipsum aute laboris nisi. Labore labore veniam irure irure ipsum pariatur mollit magna in cupidatat dolore magna irure esse tempor ad mollit. Dolore commodo nulla minim amet ipsum officia consectetur amet ullamco voluptate nisi commodo ea sit eu.
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
Sint sit mollit irure quis est nostrud cillum consequat Lorem esse do quis dolor esse fugiat sunt do. Eu ex commodo veniam Lorem aliquip laborum occaecat qui Lorem esse mollit dolore anim cupidatat. Deserunt officia id Lorem nostrud aute id commodo elit eiusmod enim irure amet eiusmod qui reprehenderit nostrud tempor. Fugiat ipsum excepteur in aliqua non et quis aliquip ad irure in labore cillum elit enim. Consequat aliquip incididunt ipsum et minim laborum laborum laborum et cillum labore. Deserunt adipisicing cillum id nulla minim nostrud labore eiusmod et amet. Laboris consequat consequat commodo non ut non aliquip reprehenderit nulla anim occaecat. Sunt sit ullamco reprehenderit irure ea ullamco Lorem aute nostrud magna.
</div>
</div>
</div>
</div>
<div> </div>
<div> </div>
<div> </div>
<div class="container">
<div class="row pb-5">
<div class="col-md-12">
<div class="input-group">
<p>Outside of tab</p>
<input type="file" id="fileUploader2" name="fileUploader2" style="visibility:hidden;" />
<input class="form-control input-xlarge" type="text" id="fileName2" value="Choose file">
<div class="input-group-append">
<button id="browseButton2" name="browseButton2" class="btn btn-success input-group-text">Browse</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$('#browseButton').on('click', function () {
$('#fileUploader').click();
});
$('#fileUploader').change(function () {
$('#fileName').val($(this).val());
});
$('#browseButton2').on('click', function () {
$('#fileUploader2').click();
});
$('#fileUploader2').change(function () {
$('#fileName2').val($(this).val());
});
});
</script>
Related
We have two tabs 1st one is search filter and the 2nd one results tab. Where all the result is showing. When we click on the search button then the result tab is active and navigate successfully.
But when we click on the search tab and then click on the search button then the result tab is not active.
I am trying through the active and inactive class. but now working.
<ul class="nav nav-tabs">
<li ng-class="{'active': activeFilters}"><a data-toggle="tab" href="{{url}}#filter">Filter</a></li>
<li ng-class="{'active': activeResults}"><a data-toggle="tab" href="{{url}}#results">Results</a></li>
</ul>
In ts file
$scope.activeFilters = false;
$scope.activeResults = true;
Add data-target along with data-toggle. See below snippet that might help you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dynamic Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#home">Home</a></li>
<li><a data-toggle="tab" data-target="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" data-target="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" data-target="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
</body>
</html>
I have a jsfiddle example illustrating an accordion that works when using no angular; in the no angular example you can see that the previous panel closes when I click on a new panel, you can also see that there is spacing between each panel. When I add angular and have the panels build from an object array the accordion no longer works correctly; instead the previous panel does not collapse when clicking a new panel and the spacing between each panel no longer exists. I have compared the code and I can't figure out what I am doing wrong, can you see what is wrong?
HTML:
<div class="container" ng-controller="cntrl">
<p>No angular:</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
<!-- now using angular -->
<p>Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):</p>
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj">
<div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
{{prop.contractName}}
</h4>
</div>
<!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
<div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<label>Price:</label> {{prop.price | currency:"$" }}</li>
<li class="list-group-item">
<label>Start Date:</label> {{prop.startDate}}</li>
<li class="list-group-item">
<label>End Date:</label> {{prop.endDate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
JS:
var app = angular.module('app', []);
app.controller('cntrl', ['$scope', function($scope) {
$scope.someObj = [{
id: 'test1',
contractName: 'Test One',
price: 0.00,
startDate: moment().format("YYYY-MM-DD"),
endDate: moment().add(6, 'months').format("YYYY-MM-DD")
}, {
id: 'test2',
contractName: 'Test Two',
price: 20.00,
startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
endDate: moment().add(12, 'months').format("YYYY-MM-DD")
}, {
id: 'test3',
contractName: 'Test Three',
price: 40.00,
startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
endDate: 'NO END'
}];
}]);
Any help would be appreciated!
Since you are adding the ng-repeat in another div which is a parent of the accordion element (Bootstrap is confounded as to where the other ones are! :) ), this problem is occurring, to solve this issue just set the ng-repeat inside the panel div itself, refer my below example.
Before:
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj">
<div class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
After:
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
var app = angular.module('app', []);
app.controller('cntrl', ['$scope', function($scope) {
$scope.someObj = [{
id: 'test1',
contractName: 'Test One',
price: 0.00,
startDate: moment().format("YYYY-MM-DD"),
endDate: moment().add(6, 'months').format("YYYY-MM-DD")
}, {
id: 'test2',
contractName: 'Test Two',
price: 20.00,
startDate: moment().add(6, 'months').format("YYYY-MM-DD"),
endDate: moment().add(12, 'months').format("YYYY-MM-DD")
}, {
id: 'test3',
contractName: 'Test Three',
price: 40.00,
startDate: moment().add(12, 'months').format("YYYY-MM-DD"),
endDate: 'NO END'
}];
}]);
.container {
margin-top: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<div class="container" ng-controller="cntrl">
<p>
No angular:
</p>
<div class="panel-group" id="accordion">
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 1
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 2
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
<div class="panel panel-default" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
<div class="panel-heading">
<h4 class="panel-title">
Collapsible Group 3
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>
</div>
</div>
<!-- now using angular -->
<p>
Using angular (<em>notice the previous panel no longer collapses and the spacing between the panels does not exist like in my no angular example</em>):
</p>
<div class="panel-group" id="ngaccordion">
<div ng-repeat="prop in someObj" class="panel panel-default" data-toggle="collapse" data-parent="#ngaccordion" data-target="#{{prop.id}}">
<div class="panel-heading">
<h4 class="panel-title">
{{prop.contractName}}
</h4>
</div>
<!-- Instead of {{prop.id}} for id below and data-target above I have also tried "test{{$index}}" -->
<div id="{{prop.id}}" class="panel-collapse collapse" ng-class="{ 'in' : $first}">
<div class="panel-body">
<ul class="list-group">
<li class="list-group-item">
<label>Price:</label> {{prop.price | currency:"$" }}</li>
<li class="list-group-item">
<label>Start Date:</label> {{prop.startDate}}</li>
<li class="list-group-item">
<label>End Date:</label> {{prop.endDate}}</li>
</ul>
</div>
</div>
</div>
</div>
</div>
I have a "edit" view where I need to display tabs to separate the different information needed. I found a site where it discusses the creation of a directive to catch the tab changing. This is my first directive and it is not working. When I click on the second tab, it takes me back to my default view. Not sure what I have implemented incorrectly.
Web Page -
<ul class="nav nav-tabs">
<li class="active"><a showTab="" href="#home">Home</a></li>
<li><a showTab="" href="#menu1">Menu 1</a></li>
<li><a showTab="" href="#menu2">Menu 2</a></li>
<li><a showTab="" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
The associated directive -
'use strict';
define(['app'], function (app) {
var injectParams = ['showtab'];
var wcTabDirective = function (showtab) {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
$(element).tabs('show');
});
}
}
};
wcTabDirective.$inject = injectParams;
app.directive('wcTab', wcTabDirective);
});
I have put a break point in the directive but it is never reached.
You haven't actually applied your "wc-tab" directive to any elements.
Try adding the directive to your tab anchor elements:
<a wc-tab showTab="" href="#menu1">Menu 1</a>
Check that the showTab attribute is correct as well. If it is a directive then it should be applied as show-tab="".
I have a problem using the bootstrap tabs in AngularJS.
<div class="tab-container">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
</ul>
<div class="tab-content">
<div class="tab-pane active cont" id="home">
<h3 class="hthin">Basic Tabs</h3>
<p>This is an example of tabs </p>
</div>
<div class="tab-pane cont" id="profile">
<h2>Typography</h2>
<p>This is just an example of content
</div>
<div class="tab-pane" id="messages">..sdfsdfsfsdf.
</div>
</div>
</div>
The problem is that when I select a tab for example Home or Profile, I am redirected to /home or /profile url instead of showing the content of the tab itself.
I have a feeling that this can be somehow acheived with a directive and prevent the redirect to the page home or profile, instead show the tab content.
replace href with data-target.
<li class="active"><a data-target="#home" data-toggle="tab" >Home</a></li>
Directive can help you to handle it.
app.directive('showTab', function () {
return {
link: function (scope, element, attrs) {
element.click(function (e) {
e.preventDefault();
jQuery(element).tab('show');
});
}
};
});
<a show-tab href="#tab_1">
Tab 1
</a>
Source
You could try using the Angular UI bootstrap components located here, http://angular-ui.github.io/bootstrap/
this code will solve the problem while using Angularjs
<div class="tabbable tabs-below" ng-init="selectedTab = 1;">
<ul class="nav nav-tabs nav-justified">
<li ng-class="{active: selectedTab == 1}">
Personal
</li>
<li ng-class="{active: selectedTab == 2}">
Education
</li>
<li ng-class="{active: selectedTab == 3}">
Contact
</li>
</ul>
<div class="tab-content" ng-show="selectedTab == 1">
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="tab-content" ng-show="selectedTab == 2">
2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="tab-content" ng-show="selectedTab == 3">
3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Use data-target instead of of href
<div class="page-menu-container">
<div class="container">
<div class="page-menu">
<ul class="nav nav-tabs">
<li><a data-toggle="tab" data-target="#Tab1">Tab1</a></li>
<li><a data-toggle="tab" data-target="#Tab2" >Tab2</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div id="Tab1" class="tab-pane fade in active"> Tab1 contant
</div>
<div id="Tab2" class="tab-pane fade in active"> Tab2 contant
</div>
</div>
Essentially I am trying to get buttons to set ng-class on a div. The buttons are created from an array using ng-repeat and the array will grow over time. I based my idea for how to code this on the last example on this page of the AngularJS documentation which does not use a function with ng-click. I am new to AngularJS and still trying to get away from my jQuery mindset so let me know if this is not the best method to go about doing this.
jsfiddle: http://jsfiddle.net/E2GB9/ - not sure why its not rendering the bootstrap 100% but it shouldn't matter..
When I use developer tools to check ng-click post load it looks correct: ng-click="appliedStyle='example1'" but clicking the button does not set appliedStyle.
html:
<body ng-app>
<div ng-controller="TypeCtrl">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Test Area</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="source">
<div class="hero-unit" ng-class="appliedStyle">
<h1>H1 Header</h1>
<h2>H2 Header</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
<ul class="unstyled">
<li ng-repeat="style in styles">
<span>Name: {{style.name}}</span><br>
<span>H1: {{style.h1}}</span><br>
<span>H2: {{style.h2}}</span><br>
<span>P: {{style.p}}</span><br>
<button class="btn-small" type="submit" ng-click="appliedStyle='{{style.className}}'">Apply {{style.name}}</button>
</li>
</ul>
The Applied Style is : {{appliedStyle}}
</div>
js:
function TypeCtrl($scope) {
$scope.styles = [
{name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}];
}
css:
.example1 h1{
font-size: 10px;
color: red;
}
.example1 h2{
font-size: 8px;
}
.example1 p{
font-size: 6px;
}
Change your controller by adding a method like this:
function TypeCtrl($scope) {
$scope.styles = [
{name: 'Example 1', h1:'32px', h2:'24px', p:'12px', className:'example1'}];
}
$scope.applyStyle = function(style) {
$scope.appliedStyle=style.className;
}
}
Then simply do this in your code:
<button class="btn-small" type="submit" ng-click="applyStyle( style )">
The long answer is that javascript with an embedded {{ }} isn't a valid expression because ng-click is using $parse service which doesn't handle {{ }} syntax. I'd just use functions because you want to put your code in Javascript and out of your templates. Keep your code separated.
Use scope' $parent and this syntax:
ng-click="$parent.appliedStyle=style.className"
Working fiddle: http://jsfiddle.net/cherniv/E2GB9/1/