I'm new to AngularJS and am trying to build a simple site with three tabs. I like the Bootstrap Tabs interface so I'm building off of that:
example.js
angular.module('base', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('base').controller('UiCtrl', function ($scope, $window) {
content1 = "Bunch of Figs";
array2 = ["Newton 1", "Newton 2"];
content2 = array2.join('<br><br>');
content3 = "Bunch of Widgets";
$scope.tabs = [
{ title:'Figs', content:content1 },
{ title:'Newtons', content:content2 }, //, disabled: true },
{ title:'Widgets', content:content3, select:'alertMe()' }
];
$scope.alertMe = function() {
setTimeout(function() {
$window.alert('You\'ve selected the widget tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
index.html
<!doctype html>
<html ng-app="base">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="example.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style type="text/css">
form.tab-form-demo .tab-pane {
margin: 20px 20px;
}
</style>
<div ng-controller="UiCtrl">
<p>
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select">
{{tab.content}}
</uib-tab>
</uib-tabset>
</div>
</body>
</html>
I have two problems:
1) The HTML tags in the join are not treated as HTML in the tabs.
2) The select callback is not set to the dynamic tab.
How can I display HTML inside the tabs?
How can I attach select callbacks to dynamic tabs?
1- You have to use ng-bind-html in your html, and $sce.trustAsHtml() in your controller
HTML:
<uib-tabset active="activeJustified" justified="true">
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()">
<div ng-bind-html="tab.content"></div>
</uib-tab>
</uib-tabset>
CONTROLLER:
angular.module('base').controller('UiCtrl', function ($scope, $window, $sce) {
content1 = $sce.trustAsHtml("<h1>Html content<br/> example</h1>");
$scope.tabs = [
{ title:'Figs', content:content1 },
{ title:'Widgets', content:content3, select: $scope.alertMe }
];
....
});
2- You aren't calling the function.
HTML:
Change select="tab.select" to select="tab.select()".
CONTROLLER:
Change select: 'alertMe()' to select: $scope.alertMe
Check this post about ng-bind-html
Check ui.boostrap docs about tabs
1. How can I display HTML inside the tabs?
=> You can use ng-bind-html and $sce.trustAsHtml()
HTML
<uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled", select="tab.select()">
<span ng-bind-html="tab.content"></span>
</uib-tab>
JS
$scope.tabs = [
{ title:'Figs', content: $sce.trustAsHtml(content1) },
{ title:'Newtons', content: $sce.trustAsHtml(content2) }, //, disabled: true },
{ title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }
];
2. How can I attach select callbacks to dynamic tabs?
=> Change select="tab.select" to select="tab.select()" and { title:'Widgets', content:content3, select:'alertMe()' } to { title:'Widgets', content: $sce.trustAsHtml(content3), select: $scope.alertMe }
$scope.alertMe must be defined before $scope.tabs
==> You can refer to this demo: https://codeide.co/master/qVGVQyWG
I choose to skip the tab component. Mostly because it did not have back button support. Further it became tricky to navigate to ex: the 3:rd tab from another page. So I used simple routing instead. ex: if there are 3 tabs I have 3 pages with specific routing. To avoid duplicating tab menu I created a component that i put in all three pages.
<ul ng-controller="tabsCtrl as tabs" class="nav nav-tabs">
<li ng-class="{'active':tabs.generalTab.isActive}">
<a ng-href="{{tabs.generalTab.path}}" translate>general.GENERAL</a>
</li>
<li ng-class="{'active':tabs.settingsTab.isActive}">
<a ng-href="{{tabs.settingsTab.path}}" translate>settings.MENU_LABEL</a>
</li>
<li ng-class="{'active':tabs.extrasTab.isActive}">
<a ng-href="{{tabs.extrasTab.path}}" translate>extras.MENU_LABEL</a>
</li>
</ul>
Related
when user clicks on the person it calls a form (form.html) using ui-router logic defined in app.js. I have 2 type of drop-down boxes, (1) using select tag and (2) using md-select tag. Pages works fine until i click on 2nd dropdown, which doesn't open the dropdown option window instead it freezes the page. I added code here in plunker however page routing doesn't work in plunker but you can reference the code.
index.html
<body ng-app="myApp">
<div class="col-sm-3 sidenav">
<div class="well"> <!-- container to hold status bar and form -->
<nav class="navbar navbar-default navbar-custom">
<a style="font-size:2.5em;position: absolute; left: 50%;" ui-sref="form"><span class="glyphicon glyphicon-user fa-5x" id="Icon"></span></a>
</nav>
<div class="column-nav-form" ui-view="formColumn" > <!--holds the form -->
</div>
</div>
</div>
</body>
form.html
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Normal DropDown </h4>
<select ng-model="selectedName" ng-options="x for x in names">
</select>
</div>
<p>I have three elements in my list, you should be able to pick whichever you like</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h4> Material DropDown </h4>
<md-select onclick='console.log("clicked")' ng-model="selectedFilter" placeholder="Select a filter"> <md-select-label>{{ selectedFilter.name }}</md-select-label>
<md-option ng-value="opt" ng-repeat="opt in filters">{{ opt.name }}</md-option>
</md-select>
</div>
</body>
app.js
var myApp = angular.module('myApp', [ 'ngAnimate', 'ngAria', 'ui.bootstrap', 'ngMaterial', 'ngMessages', 'ui.router' ]);
//routing
angular.module('myApp').config(function ($stateProvider){
$stateProvider
.state('form', {
url:"/form",
views: {
"listColumn": {
},
"formColumn": {
templateUrl: "/form.html"
}
}
})
});
//dropdown
myApp.controller('myCtrl', function($scope) {
//log
console.log($scope.names);
$scope.names = ["Emil", "Tobias", "Linus"];
$scope.filters = [
{
value: 'mine',
name: 'Assigned to me'
},
{
value: 'undefined',
name: 'Unassigned'
},
{
value: 'all',
name: 'All Tickets'
},
{
value: 'new',
name: 'New Tickets'
}
];
//log
console.log($scope.filters);
console.log($scope.selectedFilter);
});
http://plnkr.co/edit/SB7MUM44Ly01aWyL5M28?p=preview
View upon clicking person icon
Note: Dropdown for md-select doesn't load.
Thanks in advance
Changed .css and .js version to have the same and it fixed it.
angular-material.js ( v 1.0.6 )
angular-material.css ( v 1.0.6 )
Links:
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>-->
I am new in angular js,
Now try to split the templates like, header,footer,leftmenu etc..
Here i added the example for left menu.
The left menu have id=sidebar-menu". Once click the sidebar-menu need to do some action.
But that respective js have in custome.js
The "sidebar-menu" click event not working.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="bootstrap.css" rel="stylesheet">
<script src="jquery.min.js"></script>
</head>
<body class="nav-md" ng-app="myApp" >
<div class="container body">
<div class="main_container">
<div left-menu></div>
<!-- top navigation -->
<div top-navigation></div>
<!-- /top navigation -->
</div>
<script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
<script src="vendor/angular/angular.js"></script>
<script src="custom.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js
var app = angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.when('/login', {
templateUrl : 'views/login.html',
controller : 'userController'
}).when('/register', {
templateUrl : 'views/register.html',
controller : 'userController'
}).otherwise({
redirectTo : '/login'
});
}]);
app.directive('leftMenu', function() {
return {
restrict : 'A',
templateUrl : "left-menu.html",
replace : true
};
});
custom.js
$(function () {
$('#sidebar-menu li').click(function () {
alert("Ddd");
if ($(this).is('.active')) {
$(this).removeClass('active');
$('ul', this).slideUp();
$(this).removeClass('nv');
$(this).addClass('vn');
} else {
$('#sidebar-menu li ul').slideUp();
$(this).removeClass('vn');
$(this).addClass('nv');
$('ul', this).slideDown();
$('#sidebar-menu li').removeClass('active');
$(this).addClass('active');
}
});
});
left-menu.html
<div id="sidebar-menu" >
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li>
Dashboard
</li>
</li>
<li>
Advanced Components
</li>
</ul>
</div>
</div>
I understand the error I loaded js files in first then html content load in directive method.
First of all get rid of custom.js then add a "nav" directive tag like so:
<div id="sidebar-menu" >
<div class="menu_section">
<h3>General</h3>
<nav></nav>
</div>
</div>
Then build the nav.html
<ul class="nav side-menu">
<li ng-click="">
Dashboard
</li>
<li>
Advanced Components
</li>
</ul>
Then create the nav directive
app.directive('nav', function() {
return {
restrict: 'EA',
template: 'nav.html',
link: function(scope, element, attrs) {
element.find('li').click(function () {
var $this = $(this); // optimize
if ($this.is('.active')) {
$this.removeClass('active');
//$('ul', this).slideUp(); ? not sure what you're doing here?
$this.removeClass('nv');
$this.addClass('vn');
} else {
$this.find('ul').slideUp();
$this.removeClass('vn');
$this.addClass('nv');
//$('ul', this).slideDown(); ? not sure what you're doing here?
element.find('li').removeClass('active');
$this.addClass('active');
}
});
}
}
});
I haven't tested the code but this is the gist of what you need to do.
When you need to manipulate the dom you should create a directive and use the "link" function which will pass a scope, element (a light jquery wrapped dom element of the directive) and attributes. From there you can perform the tasks needed. Also be sure to have a global jQuery object '$', angular does come with a jqLite version as angular.element *not to be confused with the 'element' passed in your link function, however the lite version doesn't have all the bells and whistles you may need.
I want to provide the navigation menu dynamically by an angularjs controller:
index.html:
<body>
<div ng-controller="navi">
<ul>
<li ng-repeat="nav in navigations">
{{nav.name}}
</li>
<ul>
</div>
<script src="js/navi.js"></script>
</body>
navi.js:
angular.module('app').controller('navi') {
$scope.navigations = [
{"path": "www.google.de", "name": "Google"},
{"path": "www.bing.de", "name": "Bing"},
];
}
Result: blank page. Why?
Sorry, of course one has to use the function($scope) for this to work:
angular.module('app').controller('navi', function($scope) {
...
});
I am creating an angular js Application. which has a side bar navigation sustem. when I click on the sidebar item, then it has to show contents under that item in the content section,I am using bootstrap
See the code I've written
HTML
<div class="sidebar">
<ul>
<li ng-repeat="item in supplyItem">
<a class="span" href="#{{item.header}}">{{item.header}}</a>
</li>
</ul>
</div>
<div class="content-part">
<div class="tab-content">
<div class="tab-pane" ng-repeat="item in supplyItem" id="{{item.header}}">
{{item.desc}}
</div>
</div>
JS
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/home',{
templateUrl : 'partials/home_page.aspx',
controller:'HomePageController',
}).
when('/supplies',{
templateUrl : 'partials/supplies.aspx',
controller:'MyController',
}).
otherwise({
redirectTo: '/home'
});
}]);
appController.controller('MyController', ['$scope', function ($scope) {
$scope.supplyItem = [
{
"header": "header1",
"desc": "Descipriotn 1"
},
{
"header": "header2",
"desc": "Descipriotn 2"
}
];
$('.sidebar a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
$(function () {
$('.sidebar a:last').tab('show');
});
} ]);
but when I click on sidebar nav item it goes to the home page as i mentioned in the routeProvider.otherwise()
what is the error and how do I solve this ? any one help me please
I think you should have the ids of your tap-pane divs different:
id="item.header" should be id="{{item.header}}"
Also I noticed that in you JS you have:
$scope.supplyItem = [
{
"header": "header1",
"desc": "Descipriotn 1"
},
{
"header": "header1",
"desc": "Descipriotn 2"
}
];
And I think that the "header" values should be different in order for the bootstrap plugin to discriminate between the different divs.
I am new in angularjs.I wanted to implements tabs like tab1,tab2,tab3
when i click tab1 then it will be opend view1.html
when i click tab2 then it will be opend view2.html
when i click tab3 then it will be opend view3.html
three tabs is inside mainIndex.cshtml page.
my three view(html) and mainIndex.cshtml are inside one folder called admin
now i wanted to perform all action using angularjs .i don't want to inline code
i have tried below code but unable to achive my senario
my mainIndex.cshtml
<div id="tabs" ng-controller="AdminCtrl">
<ul id="ul1">
<li id="li1" ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
<script type="text/ng-template" src="view1.html">
</script>
<script type="text/ng-template" id="view2.html">
</script>
<script type="text/ng-template" id="view3.html">
</script>
my controller
app.controller('AdminCtrl', ['$scope', 'registerSvc', function ($scope, registerSvc) {
$scope.tabs = [{
title: 'tab1',
url: 'view1.html' // here it should be opened view1.html after clicking tab1
}, {
title: 'tab2',
url: 'view2.html'
}, {
title: 'tab3',
url: 'view3.html'
}];
$scope.currentTab = 'view1.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function (tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
have you tried using ng-if directive?
like:
<div ng-if="currentTab=='tab1'">
//tab1 partial
</div>
<div ng-if="currentTab=='tab2'">
//tab2 partial
</div>
and so on... ?