I'm working on AngularJS with ng-route, have a navigation Matches, Standings and when I click on Matches I want to open a sub navigation All, 1st Round, Semi Finals ... and I want by default the allmatches.html view to be displayed below.
I wrote something like this:
$routeProvider
.when('/matches', {
templateUrl: 'views/matchesmenu.html',
controller: 'matchesmenuCtrl',
})
to display the matches sub navigation once I click on Matches and it works fine. What can I do now to display the allmatches.html just below it (I mean by that route to matches/all
I tried to add
redirectTo : '/matches/all'
in
.when('/matches', {
templateUrl: 'views/matchesmenu.html',
controller: 'matchesmenuCtrl',
})
but it redirects without displaying the sub navigation.
Example on plnkr: https://plnkr.co/edit/UoTcOlcDQSwveCTbmxyY?p=preview
Allright, here your are - runnable plnkr. This provides a simple tab handling logic for you.
TabView
<div ng-controller="TabCtrl">
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{'active' : activeTab === 'all'}">
<a ng-click="activeTab = 'all'">All</a>
</li>
<li role="presentation" ng-class="{'active' : activeTab === 'first-round'}">
<a ng-click="activeTab = 'first-round'">1st Round</a>
</li>
<li role="presentation" ng-class="{'active' : activeTab === 'semi-finals'}">
<a ng-click="activeTab = 'semi-finals'">Semi Finals</a>
</li>
<li role="presentation" ng-class="{'active' : activeTab === 'finals'}">
<a ng-click="activeTab = 'finals'">Final</a>
</li>
</ul>
<div>
<div class="" ng-switch="activeTab">
<div ng-switch-when="all">
<div data-ng-include="'first-round.html'"></div>
<div data-ng-include="'semifinals.html'"></div>
<div data-ng-include="'finals.html'"></div>
</div>
<div ng-switch-when="first-round">
<div data-ng-include="'first-round.html'"></div>
</div>
<div ng-switch-when="semi-finals">
<div data-ng-include="'semifinals.html'"></div>
</div>
<div ng-switch-when="finals">
<div data-ng-include="'finals.html'"></div>
</div>
</div>
</div>
</div>
AngularJS application
var app = angular.module('myApp',['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/matches', {
templateUrl: 'matchesmenu.html'
})
.when('/matches/all', {
templateUrl: 'allmatches.html'
})
}).controller('TabCtrl', function ($scope) {
$scope.activeTab = 'all';
});
Try this
Define your sub menu in controller level
$scope.tabs = [
{title: 'All', url: 'allmatches.html', active: true, type: 'all'},
{title: '1st Round', url: 'semiFinals.html', active: false, type: 'semi'}
];
//handle tab click event
$scope.tabClick = function (index) {
angular.forEach($scope.tabs, function (tab) {
tab.active = false;
});
$scope.selectedTab = index;
$scope.tabs[index].active = true;
};
After that matchesmenu.html load content using ng-include option
<div class="row clearfix">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li role="presentation" ng-class="{'active':tab.active}" ng-repeat="tab in tabs" ><a href="#/log/{{tab.type}}" >{{tab.title}}</a></li>
</ul>
</div>
</div>
<div class="row clearfix">
<div class="col-xs-12" ng-repeat="tab in tabs" ng-model="tab" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
<div ng-include src="tab.url" ng-if="tab.active"> </div>
</div>
</div>
</div>
Related
When I select a item (ul,li),
I need to update the view component dynamically,but cannot achieve.
How do I modify the code ?
Do not use (Controller)"return view" method
(Partial code)
(chtml)
<div>
<ul class="nav nav-tabs">
<li role="tab"> <a href="#" onclick=change1();>1</a></li>
<li role="tab"> <a href="#" onclick=change2();>2</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane active">
#{
string item = ViewBag.NowPay;
switch (item)
{
case "Card1":
#await Component.InvokeAsync("DownloadConfig1", new { reconciliationConfig = Model });
break;
case "Card2":
#await Component.InvokeAsync("DownloadConfig2", new { reconciliationConfig = Model });
break;
default:
break;
}
}
</div>
(script)
function change1() {
$.ajax({
type: 'POST',
url: '/ReconciliationConfig/TestChane1',
success: function (data) {
}
})
}
Controller
public String TestChane1()
{
ViewBag.NowPay = "Card1";
var Result = ViewBag.NowPay;
return Result;
}
Thanks for answer
First Solution
if you don't want to go again to server, you have to render each case in separate div and show/hide with javascript
View Code cshtml
<style>
.d-none, .hidden { display: none; }
</style>
<div>
<ul class="nav nav-tabs">
<li role="tab"> <a href="#" onclick=change('Card1');>1</a></li>
<li role="tab"> <a href="#" onclick=change('Card2');>2</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane active">
#{
string item = ViewBag.NowPay;
}
<div id="Card1" class="cards #(item == "Card1" ? "" : "hidden d-none")">
#await Component.InvokeAsync("DownloadConfig1", new { reconciliationConfig = Model });
</div>
<div id="Card2" class="cards #(item == "Card2" ? "" : "hidden d-none")">
#await Component.InvokeAsync("DownloadConfig2", new { reconciliationConfig = Model });
</div>
</div>
<script>
function change(name) {
$('.cards').addClass('hidden d-none'); // hide all cards
$('#'+ name).removeClass('hidden d-none'); // show only one
}
</script>
Not currently successful
cshtml
<style>
.d-none, .hidden { display: none; }
</style>
<div>
<ul class="nav nav-tabs">
<li role="tab"> <a href="#" onclick=changeCard1();>1</a></li>
<li role="tab"> <a href="#" onclick=changeCard2();>2</a></li>
</ul>
</div>
<div role="tabpanel" class="tab-pane active">
<div id="Card1" class="d-none">
#await Component.InvokeAsync("DownloadConfig1", new { reconciliationConfig = Model });
</div>
<div id="Card2" class="d-none">
#await Component.InvokeAsync("DownloadConfig2", new { reconciliationConfig = Model });
</div>
</div>
<script>
function changeCard1() {
$('Card1').removeClass('d-none'); // show only one
$('Card2').addClass('d-none');
}
function changeCard2() {
$('Card1').addClass('d-none'); // show only one
$('Card2').removeClass('d-none'); // show only one
}
</script>
I want to use ngIf to show a component like this:
<ul class="nav nav-tabs">
<li (click)="resetTab(1)" [ngClass]="{'active': first}" id="active"><a>Tab 1</a></li>
<li (click)="resetTab(2)" [ngClass]="{'active': second}" ><a>Tab 2</a></li>
</ul>
<div class="tab-content">
<div *ngIf="first" class="tab-pane fade in active">
Content of tab 1
</div>
<div *ngIf="second" class="tab-pane fade">
Content of tab 2:
<events-list></events-list>
</div>
</div>
However for some reason I don't see my component appears when switching tabs (tabs itself switch just fine)
My component's code:
resetTab(tab: number) {
this.first = (tab == 1) ? true : false;
this.second = (tab == 2) ? true: false;
}
I try this for sidebar menu and working fine you can try this:
in html
<div class="sidebar-category">
<ul class="nav nav-pills nav-stacked">
<li [class.active]="panelshow == 'tab1'">
<a (click)="setPanel('tab1')">Tab1</a>
</li>
<li [class.active]="panelshow == 'tab2'">
<a (click)="setPanel('tab2')">Tab2</a>
</li>
</ul>
</div>
<div *ngIf="panelshow == 'tab1'">
</div>
<div *ngIf="panelshow == 'tab2'">
</div>
and in component:
public panelshow:string;
private setPanel(name) {
this.panelshow = name;
}
I am new to Angular and want to set the value of scope variable from directive and access it from the template file, but it's not working.
I am using Ratchet Toggle, and want to get all toggles that the user has turned off. I was able to write to the console but was not able to read from the template file.
Here's my directive:
mobileApp.directive('whenToggled', [function() {
function linkFunction(scope, element, attr) {
scope.$watch(function() {
setTimeout(function(){
var has_class = element.hasClass('active');
var id = element.attr('id');
if(has_class==false){
scope.unwanted_ingredients += id;
}
else
scope.unwanted_ingredients = "none";
},0)
}, function(value) {
//
});
}
return {
restrict: 'A',
scope: true,
link: linkFunction,
};
}]);
and here's my template code:
Ingredients: {{unwanted_ingredients}}
<ul class="table-view">
<li class="table-view-cell">
Item 1
<div id="item1" class="toggle" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 2
<div id="item2" class="toggle active" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
<li class="table-view-cell">
Item 3
<div id="item3" class="toggle" when-toggled ng-click="">
<div class="toggle-handle active"></div>
</div>
</li>
<li class="table-view-cell">
Item 4
<div id="item4" class="toggle" when-toggled ng-click="">
<div class="toggle-handle"></div>
</div>
</li>
</ul>
unwanted_ingredients is being populated on initial load as I set it on the controller as:
$scope.unwanted_ingredients = "abc";
but the value is not being changed through the directive link. I appreciate your input on this as I don't understand well how scopes works with Angular.
I have an Angular.js component which has a list of tabs. When a tab is clicked I assign an ng-classto it (active), so it gets highlighted. This is working fine, but I also want the first tab to be the default active one when a user first load the page, but at the moment nothing is highlighted when I load the page.
Here's my component:
'use strict';
angular.module('menuBar').component('menuBar', {
templateUrl: 'menu-bar/menu-bar.template.html',
controller: function menuBarController() {
this.menus = [
{
name: 'Tab1'
}, {
name: 'Tab2'
}, {
name: 'Tab3'
}, {
name: 'Tab4'
}, {
name: 'Tab5'
}
];
this.tab = this.menus[0].name;
this.setTab = function (tabId) {
this.tab = tabId;
}
this.isSet = function (tabId) {
return this.tab === tabId;
}
}
});
Here my html template:
<div class="navbar navbar-inverse navbar-collapse">
<div class="container">
<ul class="nav nav-tabs">
<li ng-repeat="menu in $ctrl.menus" ng-class="{active:tab.isSet(menu.name)}">
<a href ng-click="tab.setTab(menu.name)">{{menu.name}}</a>
</li>
</ul>
</div>
</div>
Maybe something wrong at this line here where I'm trying to set my default tab?
this.tab = this.menus[0].name;
Update: Plunker added
Live preview here
<div class="navbar navbar-inverse navbar-collapse">
<div class="container">
<ul class="nav nav-tabs">
<li ng-repeat="menu in $ctrl.menus" ng-class=" active:menu.name==$ctrl.tab}">
<a href ng-click="$ctrl.setTab(menu.name)">{{menu.name}}</a>
</li>
</ul>
</div>
You can use orderBy:
Function: A getter function. This function will be called with each item as argument and the return value will be used for sorting.
I'm not sure about the syntax since I haven't used components yet but something among the lines:
<div class="navbar navbar-inverse navbar-collapse">
<div class="container">
<ul class="nav nav-tabs">
<li ng-repeat="menu in $ctrl.menus | orderBy: $ctrl.isSet(tab.id)" ng-class="{active:tab.isSet(menu.name)}">
<a href ng-click="tab.setTab(menu.name)">{{menu.name}}</a>
</li>
</ul>
</div>
</div>
I have the below HTML and then the JS below that with my service and controller:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" ng-show="is_authenticated">
<li class="dropdown">
Account <b class="caret"></b>
<ul class="dropdown-menu">
<li>Account</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" ng-hide="is_authenticated">
<li ng-class="{ active: register }">Sign Up</li>
<li ng-class="{ active: login }">Sign In</li>
</ul>
</div>
The ng-hide works properly, however, the ng-show does not.
Auth.is_authenticated()
.success(function(data) {
$scope.is_authenticated = data.authenticated;
});
Service:
return {
is_authenticated: function() {
return $http.get('/api/users/is_authenticated');
},
When I go to the API endpoint in the URL it returns `{"authenticated": true}
What is this happening?
Edit:
When I view the source in the developer tools it seems like for some reason the HTML with <ul> for ng-show is not even there.
Should this be true?
You can simply change the value to a boolean and work accordingly. So you controller code will look like this:
Auth.is_authenticated()
.success(function(data) {
$scope.is_authenticated = (data.authenticated. toLowerCase() === "true");
});
Change is_authenticated function like :
Auth.is_authenticated()
.success(function(data) {
if(data.authenticated === 'true')
{
$scope.is_authenticated = true;
}
else
{
$scope.is_authenticated = false;
}
});