Angularjs Bootstrap Example - Jquery
How to use bootstrap styles in angularjs?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Angular bootstrap is a popular style chart in jquery. The code allows you to style your chart for your required needs. The sample code to given below is used to explain you how to use bootstrap with angularjs.
<script src='http://code.jquery.com/jquery-2.1.0.min.js'></script>
<link rel="stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<script>
customDirectives = angular.module('customDirectives', []);
customDirectives.directive('customTabs', function () {
return {
restrict: 'A',
template: '\
<ul class="nav nav-tabs">\
<li class="active"><a href="#{{contentBaseId}}-1" data-toggle="tab">Tab 1</a></li>\
<li><a href="#{{contentBaseId}}-2" data-toggle="tab">Tab 2</a></li>\
<li><a href="#{{contentBaseId}}-3" data-toggle="tab">Tab 3</a></li>\
</ul>\
<div class="tab-content">\
<div class="tab-pane active" id="{{contentBaseId}}-1">This is tab1 test content.</div>\
<div class="tab-pane" id="{{contentBaseId}}-2">This is tab2 test content.</div>\
<div class="tab-pane" id="{{contentBaseId}}-3">This is tab3 test content.</div>\
</div>',
link: function(scope, el, attrs){
scope.contentBaseId = attrs.tabsBaseId;
}
};
});
angular.module('CustomComponents', ['customDirectives']);
</script>
<div ng-app="customDirectives" style='width:220px;'>
<div custom-tabs tabs-base-id="content-tab"></div>
</div>
<style>
.nav-tabs {
font-size: 1em !important;
font-weight: bold !important;
}
</style>
