I am newbie in AngularJS. I have navbar with nav-items like this:
<div class="header-inner">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="nav-area">
<nav class="mainmenu">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
and section:
<section class="hero-area">
//some text
</section>
how can I show section when I click on Link 1, and hide when click on rest of links. Default active link is "Link1" so I need to show section when page start.
Thanks for help.
You probably want to use ui-router which has a solution for this problem and much more. It will also allow you to restore the active page (and other parameters) from bookmarks.
If you prefer quick&dirty you could try a scope variable:
<a ng-click="active_section='link 2'">Link 2</a>
...
<section ng-show="active_section==='link 2'">
Have you tried using a ng-click + ng-show (or ng-hide)?
<div class="header-inner">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="nav-area">
<nav class="mainmenu">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</div>
</div>
<section class="hero-area" data-ng-init="showSection = 1" data-ng-show="showSection === 1">
//some text
</section>
Related
I am trying to put a checkbox in a tab panel on the left side. But the checkbox cannot check or uncheck. Can anyone help me to solve this ? This is my code and the image on what I am trying to do.
<aside class="sm-side">
<div role="tabpanel">
<ul class="nav nav-pills brand-pills nav-stacked" role="tablist">
<li role="presentation" class="brand-nav active" >
<a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">
<input type="checkbox" id="eq1" >
<label for="eq1">Resource 1</label>
</a>
</li>
<li role="presentation" class="brand-nav">Resource 2</li>
<li role="presentation" class="brand-nav">Resource 3</li>
<li role="presentation" class="brand-nav">Resource 4</li>
</ul>
</div>
</aside>
<aside>
<div role="tabpanel" class="tab-pane active" id="tab1">
<p>Hello1</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<p>Hello 2</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
<p>Hello 3</p>
</div>
<div role="tabpanel" class="tab-pane" id="tab4">
<p>Hello 4</p>
</div>
</aside>
Image of what I am trying to do
I'm trying to include two submenu inside a sidebar. However, I have not been getting consistent result for the dropdown. On my 10 attempts of loading/refreshing, the sub-menu drop down only works 4/10 times. Does anyone have an idea why it is producing such results?
There's no error on console either.
Also, I'm using AngularJS to include this sidebar into my main html code.
Code for Sidebar, sidebar.html
<div class="col-md-2"><!--grid 2 for bootstrap -->
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-home"></i> Dashboard</li>
<br>
<li><i class="glyphicon glyphicon-calendar"></i> Calendar</li>
<br>
<li><i class="glyphicon glyphicon-stats"></i> Stats</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> List
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 1</li>
<li>Sub Function 2</li>
<li>Sub Function 3</li>
<li>Sub Function 4</li>
</ul>
</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> Function 5
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 5</li>
<li>Sub Function 6</li>
<li>Sub Function 7</li>
</ul>
</li>
</ul>
</div>
</div>
AngularJS part to incldue sidebar
<!--Include header-->
<div ng-include src="'views/templates/header.html'"></div>
<!--end of header-->
<div class="page-content">
<div class="row">
<!-- Insert Side bar-->
<div ng-include src="'views/templates/sidebar.html'"></div>
<div class="col-md-10"><!--Main content -->
<div class="row">
<!-- to display content here -->
</div>
</div>
</div>
</div>
Not sure what went wrong.
I want to show the result as below:
<div class="mainmenu">
<h2 class="sidebar1">Main Menu</h2>
<ul>
<li>this is a dummy link 1</li>
<li>this is a dummy link 2</li>
<li>this is a dummy link 3</li>
<li>this is a dummy link 4</li>
<li>this is a dummy link 5</li>
<li>this is a dummy link 6</li>
<li>this is a dummy link 7</li>
<li>this is a dummy link 8</li>
<li>this is a dummy link 9</li>
<li>this is a dummy link 10</li>
</ul>
</div>
However, I see that in D7, some extra divs are added with the result and the UL class is not appeared. Please check the below result that D7 rendered:
<div class="content">
<div class="view view-test1 view-id-test1 view-display-id-block view-dom-id-2e7dd9ae3682d3d6e095a22755b506c0">
<div class="view-header">
<div class="mainmenu">
<h2 class="sidebar1">My Pages</h2> </div>
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
</ul>
<div class="view-footer">
</div>
</div>
</div>
</div>
Can you please help me to remove the additional divs added by drupal as default?
You can turn off some of the extra markup within the Views settings, but you have to modify the templates used to render the view if that is not sufficient.
I am using ng-show and ng-click to show / hide 2 divs based on the user click of one of the app menu as shown below. The problem I am facing is that on clicking on the link to display the dashboard div nothing is shown, instead the other div (div2) is always shown. Can someone please check my code and let me know what exactly I am doing wrong here? Thanks
index
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
</div>
<div>
<div ng-controller="MenuController">
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
<div ng-view></div>
</div>
</div>
MenuController:
$scope.showUserPanel = false;
$scope.switchDashboard = function(){
$scope.showUserPanel = !$scope.showUserPanel;
};
I have also tried changing the index to have only one instance for MenuController, but I still have as shown below the same problem
<div id="header" ng-controller="MenuController">
<ul >
<li>
Main
</li>
<li>
<a href ng-hide="userLogged == 1">Login</a>
<a href ng-click="switchDashboard()" ng-show="userLogged > 1">Dashboard</a>
</li>
</ul>
<div id="dashboard" ng-show="showUserPanel">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</div>
<div id="div2" ng-hide="showUserPanel">
<ul>
<li>Reg item 1</li>
<li>Reg item 2</li>
</ul>
</div>
</div>
<div>
<div ng-controller="MenuController">
<div ng-view></div>
</div>
</div>
You have 2 different instances of your controller and they will function independently of each other, see this fiddle: http://jsfiddle.net/k4YH6/
HTML:
<div ng-app>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 1: {{value}}</button>
</div>
<div ng-controller="MyCtrl">
<button type="button" ng-click="increment()">Ctrl instance 2: {{value}}</button>
</div>
</div>
JS:
function MyCtrl($scope) {
$scope.value = 1;
$scope.increment = function () {
$scope.value++;
};
}
More related fiddle: http://jsfiddle.net/jph4n/
You don't need the switchDashoard() function.
ng-click="showUserPanel = !showUserPanel"
ng-show="showUserPanel"
showUserPanel = !showUserPanel Will toggle the values for ng-show/ng-hide.
so I'm stacking on this problem.
I try to create tabs with loading via ng-include the contents. But doesn't matter what kind of url I include I get always this error http://goo.gl/yyNeQb
I don't have anything else included (Controller,...)
Someone any idea?
<ul class="nav nav-tabs">
<li ng-class="{active: main.active.tab == 'register'}" class="active">
<a ng-click="main.active.tab = 'register'">Register</a>
</li>
<li ng-class="{active: main.active.tab == 'login'}">
<a ng-click="main.active.tab = 'login'">Login</a>
</li>
</ul>
<div class="tab-content">
<div ng-switch="main.active.tab">
<div
ng-switch-when="register"
ng-include src="'../angular/views/register.html'">
</div>
<div
ng-switch-when="login"
ng-include src="'../angular/views/login.html'">
</div>
</div>
</div> <!-- tab content-->
If I include a Controller like this
<script type="text/javascript" src="../angular/controller/RegisterController.js"></script>
The source will be load and I can work with it.
Have not tested it immediately but can you try this instead?
<div class="tab-content">
<div ng-switch="main.active.tab">
<div ng-switch-when="register">
<ng-include src="'../angular/views/register.html'"></ng-include>
</div>
<div ng-switch-when="login">
<ng-include src="'../angular/views/login.html'"></ng-include>
</div>
</div>
</div>