We are creating a tabs widget in ServiceNow and want to initiate the first tab as the active tab when the page loads. Right now when the page loads, this is what we see:
We actually want to see this on load:
Our code looks like this:
<ul class="nav nav-tabs">
<li ng-click="c.activateClass(tabs)" ng-repeat="tabs in c.data.tab_labels track by $index" ng-class="{'active':tabs.active}">
<a data-toggle="tab" href="#{{tabs}}">{{tabs}}</a>
</li>
</ul>
<div class="tab-content" >
<div ng-repeat="content in c.data.tab_labels" id="{{content}}" class="tab-pane fade in active">
<h3>{{content}}</h3>
<p>Some content.</p>
</div>
</div>
function($scope) {
/* widget controller */
var c = this;
c.data.tab_labels = c.options.tab_labels.split(',');
c.activateClass = function(subModule){
subModule.active = !subModule.active;
}
console.log('tabs');
console.log($scope);
}
We tried to use ng-init, but it was returning a console error. Any idea how to initiate the first tab on page load? Thanks!
You can set the active tab as active like this:
if(c.data.tab_labels.length > 0) {
c.data.tab_labels[0].active = true;
}
and show the active content:
<div ng-repeat="content in c.data.tab_labels | filter:{active:true}">
Related
My layout page looks like this:
<li class="dropdown">
<ul class="submenu">
<li>#Translate("MY_ACCOUNT")</li>
</ul>
</li>
In layout page i have : #RenderBody()where i have Index page.In index page im using <div ng-view></div>. What im trying to do is when user click on a href to redirect him on that page and set class to this menu that is render in ng-view:
<div class="account-item">
<div class="account-heading" ng-class="{active : activeMenu === 'Settings'}">
<h4 class=" account-title has-sub">
<a data-toggle="collapse" data-parent="#accordion" href="#settings" ng-click="activeMenu='Settings'">5. #Translate("SETTINGS")</a></h4>
</div>
<div id="settings" class="account-collapse collapse in">
<div class="account-body">
#Translate("PERSONAL_INFORMATION")
#Translate("NOTIFICATIONS")
#Translate("CHANGE_PASSWORD")
#Translate("GAME_SETTINGS")
</div>
</div>
</div>
When i try this nothing happens:
$scope.SetActiveMenuForPersonalInfo = function () {
$scope.activeMenu = 'Settings';
$scope.activeLink = "PersonalInfo";
}
$scope.activeMenu and $scope.activeLink are visible only in function and thats why i cant set class on menu. When i put it out of function it works
Try changing the tripple equality sign in ng-class="{'active-link' : activeLink==='PersonalInfo'}" to double ==
PS: I do not understand the last paragraph
In my Angular app I have a simple twitter-bootstrap carousel, in a tab:
<div class="tabbable">
<ul class="nav nav-pills">
<li ng-class="{active: tabSelected === 'main'}">
Main
</li>
<li ng-class="{active: tabSelected === 'photos'}">
Photos
</li>
</ul>
</div>
...
<div class="tab-content" ng-show="tabSelected === 'photos'>
<div class="slides-control">
<carousel disable-animation="false">
<slide ng-repeat="photo in person.photos" active="photo.active">
<img class="slide" ng-src="{{photo.path}}" />
</slide>
</carousel>
</div>
</div>
In the controller I have defined a method, tabSelect(tabName, photoNumber), which allows the tab to be selected in code, and - if the tab is the one named 'photos' - a specific image number can be selected:
<script>
$scope.tabSelect = function (tabName, photoNumber) {
if (tabName === 'photos') {
$scope.person.photos[0].active = false;
$scope.person.photos[photoNumber].active = true;
}
$scope.tabSelected = tabName;
};
</script>
The problem is this:
When calling, for example, $scope.tabSelect('photos', 7);, the photos tab is shown, but initially the previously active image is shown, and then immediately it slides to the selected image (the 7th, in the example). I don't want to avoid using animations, which are quite cool... Though, I want to display immediately the selected image...
I did already try to surround the $scope.tabSelected = tabName; instruction in a $timeout() block, and the selected slide is immediately shown, but not fully rendered (for example, the arrows are not present...).
I am creating tabs as:
<tabset class="content-tabset no-margin">
<tab ng-repeat="t in t.values" heading="{{t.name}}" active="t.active">
//other stuff
</tab>
</tabset>
Now within this other stuff I also have button which when clicks updates the row and refreshes that part. When the refresh happens it also resets the tab I am currently on.
So if I am tab two and click on the button, the panel refreshes and I come back on tab 1. How can I prevent this?
Use localStorage. Set it on selecting tab. To get boolean value of active state for current tab use ng-init.
<tabset class="content-tabset no-margin">
<tab
ng-repeat="t in t.values"
heading="{{t.name}}"
ng-init="isActive = isActiveTab(t.name, $index)"
active="isActive"
select="setActiveTab(t.name)">
//other stuff
</tab>
</tabset>
And in your controller
$scope.setActiveTab = function( activeTab ){
localStorage.setItem("activeTab", activeTab);
};
$scope.getActiveTab = function(){
return localStorage.getItem("activeTab");
};
$scope.isActiveTab = function( tabName, index ){
var activeTab = $scope.getActiveTab();
return ( activeTab === tabName || ( activeTab === null && $index === 0 ) );
};
NOTE: Since your t has no unique ID for tabs, names should be unique to detect active tab correctly.
See example JSFiddle.
Whenever you do a refresh the local/scope variables runs out of scope. So the way out to solve this is using JavaScript's Session Storage/ Local Storage.
Session storage will run out of scope once you close the browser while local storage will persist value till window and browser lifetimes.
Inside controller:
$scope.selTab = sessionStorage.tabName; //On refresh it will fetch value from session storage
$scope.onClickTab = function(tabName){ //On click it will set the sessionStorage
$scope.selTab = tabName;
sessionStorage.tabName = tabName;
}
Inside HTML must refer your controller
<ul class="nav nav-pills col-md-12 col-sm-12 col-xs-12{{active}}">
<li ng-class ="{active:selTab=='tab1'}">Tab3</li>
<li ng-class ="{active:selTab=='tab3'}">Tab3</li>
</ul>
You can use this package ui-router-tabs. Follow the link https://github.com/rpocklin/ui-router-tabs. Easy to use and gets the job done.
I have solved it by using Local Storage
Inside HTML:
<ul class="nav">
<li>
<a ng-click="goToManageUsers('manageUser')" ng-class="{'active': selectedTab == 'manageUser'}">
<i class="lnr lnr-home"></i>
<span>Manage User</span>
</a>
</li>
<li>
<a ng-click="goToManageRequest('manageImage')" ng-class="{'active': selectedTab == 'manageImage'}">
<i class="lnr lnr-home"></i>
<span>Manage Image</span>
</a>
</li>
</ul>
Inside Controller:
$scope.selectedTab = localStorage.getItem('getActive');
$scope.goToManageUsers = function (user) {
$scope.selectedTab = user;
localStorage.setItem('getActive', user);
}
$scope.goToManageRequest = function (image) {
$scope.selectedTab = image;
localStorage.setItem('getActive', image);
}
To do this same thing in Angular 2+, you also use LocalStorage. Something like this (I used ng-bootstrap to enable Bootstrap tabs):
HTML:
<ngb-tabset class="nav-fill" (tabChange)="tabChange($event)" [activeId]="activeTabId">
<ngb-tab title="Tab 1" id="tab1">
...
</ngb-tab>
<ngb-tab title="Tab 2" id="tab2">
...
</ngb-tab>
</ngb-tabset>
.ts:
import {NgbTabChangeEvent} from "#ng-bootstrap/ng-bootstrap";
... other imports
export class MyComponent {
activeTabId: string;
constructor() {
this.activeTabId = localStorage.getItem("activeTab");
}
tabChange($event: NgbTabChangeEvent) {
localStorage.setItem("activeTab", $event.nextId);
}
}
ive got a Problem. I want to Show Hide Menuitems when the User ist logged in or logged out.
So i wrote a homecontroller : scope.UserLoggedIn = $window.sessionStorage.getItem('loginToken') != null;
And in my Index.html this :
<div class="collapse navbar-collapse" id="top-navbar">
<ul class="nav navbar-nav">
<li class="pull-left">HOME </li>
<li class="pull-right" data-ng-show="UserLoggedIn">LOGOUT</li>
<li class="pull-right" data-ng-hide="UserLoggedIn">LOGIN</li>
<li class="pull-right" data-ng-hide="UserLoggedIn">REGISTER</li>
</ul>
</div>
The Property is set correct but the Menu disappears only if i refresh the Page. When i logout, i have to Refresh the Page to render the new Menu.
I think, im doing it wrong :/
You have not detailed about your, homeController declaration and when do you set the variable.
But one way to fix this issue would be to use a function instead. Something like
scope.UserLoggedIn = function () {
return $window.sessionStorage.getItem('loginToken') != null;
}
This function would get called every time digest cycle happens so you would always get the correct value.
I am just getting started with Angular and am still trying to get a feel for how it works. I have 2 questions about a list with ng-repeat. I will post my code first.
HTML
<div class="row">
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="class in classes | orderBy:orderProp" ng-class="activeClass">
<a ng-click="loadRoster(class)">{{class.class_name}}</a>
</li>
</ul>
</div>
<div class="span2">
<ul class="nav nav-pills nav-stacked">
<li ng-repeat="student in students | orderBy:orderProp">
<a ng-click="enterPassword(student)">{{student.student_name}}</a>
</li>
</ul>
</div>
</div>
Controller
function ClassListCtrl($scope, $http) {
$scope.loadedList=[];
$scope.students=[];
$scope.activeClass='';
$scope.orderProp = 'alphabetical';
$http.get('data/class.json').success(function(data) {
$scope.classes = data;
});
$scope.loadRoster=function(classlist){
$scope.selectedClass=classlist;
$scope.activeClass='active';
if($scope.loadedList[classlist.class_id]== undefined){
$http.get('data/class_'+classlist.class_id+'.json').success(function(data){
$scope.loadedList[classlist.class_id]=data;
$scope.students=data;
});
}
$scope.students=$scope.loadedList[classlist.class_id];
}
$scope.studentClick=function(student){
}
}
Ok, this pulls the data just fine. I can click on a class and it loads the students in that class. To cut down on AJAX calls, I store those that are clicked and if that class is clicked again, it will fetch it from memory instead of making the call. This is fine as class rosters are static for the most part.
I am trying to have it load a default class roster (the first alphabetically) and mark just that list item as active.
Secondly, when they click a list item, I want to change that list item to active, and change the class of the other ones back to nothing. I am not sure how to do that either. As it stands, none are active now, but when I click one, all become active.
in Html ng-class, if class_id matches $scope.activeClass set class of li to "active"
<li ng-repeat="class in classes | orderBy:orderProp" ng-class="{'active':class.class_id == activeClass}">
in Controller when $scope.loadRoster is called set $scope.activeClass to class_id of the class passed to function
$scope.loadRoster=function(classlist){
$scope.selectedClass=classlist;
$scope.activeClass=classlist.class_id;
for your default active class just set $scope.activeClass to class_id of the class