I'm attempting to define a site wide menu that is displayed within a bootstrap navbar.
Top level config.toml is;
baseURL = "http://localhost/"
languageCode = "en-us"
title = "Localhost"
[menu]
[[menu.main]]
identifier = "page1"
name = "page1"
url = "/page1/"
weight = 0
[[main.menu]]
identifier = "page2"
name = "page2"
url = "/page2/"
weight = 1
[[main.menu]]
identifier = "page3"
name = "page3"
url = "/page3/"
weight = 2
The menu sits within a site-header partial that is being passed in the site context.
index.html
{{ partial "head.html" . }}
<body>
{{ partial "site-header.html" . }}
<div class="row">
<div class="col-12">
<main>
<section>
<h1>{{.Title}}</h1>
</section>
</main>
</div>
</div>
</body>
site-header.html
<header>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark ">
<a class="navbar-brand" href="{{ "/" | relURL}}"><img src="/images/Main-Logo-v1-1.png" class="d-inline-block align-top menu-brand-image" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li class="navbar-item {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}">
<a class="nav-link" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
</div>
</nav>
</div>
</div>
</header>
The {{range .Site.Menus.main }} seems only to parse the first element within the table array [[menu.main]] as the 'page1' entry is all that is included within the generated html.
I've added some debug printf also which confirms that the range only recognises [[menu.main]] as being an array of 1.
Any ideas, pointers would be appreciated.
Seems like you have misspelled the other menu entries in config.toml menu definition. You are declaring [[main.menu]] instead of [[menu.main]]. The first one is correct though, that's why it appears.
Add pageRef to each menu item in config.toml that should be the same as url.
Source 1: Menus in Hugo
Source 2: Hugo release v0.86.0
I was also facing same problem. when I have started using hugo its version was V0.83.1. when I deploy my website menus where working fine. but after some days menus where not displaying.
git hub issue link
after referring above link I have updated to latest version of hugo i.e v0.108.0 and it works. you may check by updating hugo version.
Related
I have a loop ng-repeat that displays sevral icons.
<div class="box">
<div class="box-body">
<div class="row" >
<div class="col-sm-6" style="margin-bottom: 5px;" ng-repeat="record in newlayout.display" align="center">
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
<span class="badge bg-yellow" style="font-size:22px;">{{record.numberOfSamples}}</span>
<i class="fa fa-{{newlayout.labStyle}}"></i> {{record.lab}}
</a>
</div>
</div>
</div>
</div>
My issue is that the second part of the binded variable itemValue should be dynamic
In my Js, I have this
newLayout.url = 'sublabs/?labName=';
newLayout.itemValue = 'record.lab';
The URL is dynamic.
When I click on the first displayed Icon, the url should look like this :
But it didn't work as I had a compilation error..
Does someone have an idea how to fix this:
http://localhost:8181/#/newlayout/sublabs?labName=PIA/C1 - Shiftlabo
Where the record value "PIA/C1 - Shiftlabo" change.
So basically here if I change
<a class="btn btn-app" ng-href="#newlayout/{{newlayout.url}}{{newlayout.itemValue}}" >
{{newlayout.itemValue}} by {{record.lab}} it would work..but the {{record.**lab**}} should be dynamic as it will have another value when I click on the icon. It will change to {{record.subLab}}
Thanks
Use property acccessor bracket notation inside the binding:
<div>{{record[labOrSublab]}}</div>
JS
var isSublab = false;
$scope.labOrSublab = "lab";
$scope.clickHandler = function() {
isSublab = !isSublab;
$scope.labOrSublab = isSublab ? 'subLab' : 'lab';
};
I am working on AngularJs app where I need to show Name of customer but it should mail to link with email to his email address.
Eg : If name is Bob and email is bob#a.com , then on click of Bob it should show mail to bob#a.com
my html as as below
<div class="form-group mg-t20" ng-hide="!groupObj.accountExecutiveName">
<label class="wd50p control-label left fw-norm">Account Executive:</label>
<div class="wd48p blue-txt">
{{groupObj.accountExecutiveName}}
</div>
</div>
I do have email property . Its groupObj.accountExecutiveEmail . How do i do this in html ?
The following code should work in your case:
<a ng-href="mailto:{{ groupObj.accountExecutiveEmail }}" target="_blank">
{{ groupObj.accountExecutiveName }}
</a>
So your final HTML will look like this:
<div class="form-group mg-t20" ng-hide="!groupObj.accountExecutiveName">
<label class="wd50p control-label left fw-norm">Account Executive:</label>
<div class="wd48p blue-txt">
<a ng-href="mailto:{{ groupObj.accountExecutiveEmail }}" target="_blank">
{{ groupObj.accountExecutiveName }}
</a>
</div>
</div>
Cheers!
You can add something like this to your template:
<a ng-href="mailto:{{groupObj.accountExecutiveEmail}}" target="_blank">
{{groupObj.accountExecutiveName}} --> here will be the item's name
</a>
mailto: in an <a> tag is the way to go.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Email_links
Bob
Just use a mailto link
<a ng-href="mailto:{{groupObj.accountExecutiveEmail}}">Send email</a>
Angular2+:
<a [href]="'mailto:' + groupObj.accountExecutiveEmail" target="_blank">Send mail</a>
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
For my angular application , i have created left nav menu. On click of link ,corresponding page is opening. My problem is I want to change active link color to blue whereas other links are in white color. When I click another link from menu ,that link should be in blue and remaining are in white.
I do not know how to do this in angular. With Jquery , its easy for me. But angular makes me nervous.
My left nav is
<div class="leftNavList">
<div class="leftNavManageHeading"><span "mSans300 font14">Manage</span></div>
<ul class="nav manageNav">
<li ng-click="isCollapsed2 = !isCollapsed2">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Usage</span>
</div>
</div>
</li>
<li ng-click="isCollapsed3 = !isCollapsed3">
<div class="listOuterWrapper">
<span class="mSans300">Payment</span>
</div>
<div class="listInnerWraper">
<div collapse="!isCollapsed3">
<ul class="paymentNav mSans30 font14">
<li>PaymentMethod</li>
<li>PaymentHistory</li>
</ul>
</div>
</div>
</li>
<li ng-click="isCollapsed4 = !isCollapsed4">
<div class="listOuterWrapper">
<div class="listInnerWraper">
<span class="mSans300">Account</span>
</div>
</div>
</li>
</ul>
</div>
Step 1: In ng-init declare a variable.
ng-init="activelink=0"
Step 2: Now in ng-cick of link change the value of activelink.
<li><a href="" ng-click="activelink=1"</a></li>
<li><a href="" ng-click="activelink=2"</a></li>
Step 3: Declare a class linkcolor that defines the color of the active link.
Step 4: Now use ng-class="{ 'linkcolor' : activelink==1 }" expression for both the link.
Step 5: The links will change to
<li><a href="" ng-click="activelink=1" ng-class="{ 'linkcolor' : activelink==1 }" </a></li>
<li><a href="" ng-click="activelink=2" ng-class="{ 'linkcolor' : activelink==2 }"</a></li>
The expression activelink==1 will return true or false depending on the value of activelink.
I would recommend looking into ui-router , it has active states (these are the pages of your app) which do all these css and state changing from the view rather than having the logic in your controller and there are many powerful tools to make your app function better in less code..
In your nav:
<ul>
<li ui-sref-active="active" class="item">
<a href ui-sref="route1">route1</a>
</li>
</ul>
And thats it! Your currently active state/ view will apply the ui-sref-active="active" class to that li element. where "active" is the class name which is applied.
I'm new to angular and was wondering how to tackle the following situation. I'm using angular with jquery mobile and am creating a one page app. When the app loads, I have it create pages or divs inside the body tag. I have two types of pages, "typical pages" and "video pages" but I want to use one object to create both page types. I want to use one object because I also use that object to create my menu and I don't want to have to edit multiple objects.
My issue is, I want to create a "typical page" for each element in the object but I only want to create a "video page" for each object that doesn't have "videoPage: false". I tried using ng-if on the "video page" ng-repeater (see html below) but it doesn't seem to be working. Can I use the ng-if on a ng-repeater?
I have the following data/object:
function App($scope){
$scope.pages = [
{
id: "intro",
title: "Intro",
videoPage: false
},{
id: "activeStretches",
title: "Active Stretches by Area"
},{
id: "passiveStretches",
title: "Passive Stretches by Area"
}
];
}
And the html:
<body ng-app ng-controller="App">
<div data-role="page" id="{{page.id}}" ng-repeat="page in pages">
<div data-role="header" data-theme="h">
<a data-rel="back" data-icon="arrow-l">Back</a>
<h1>{{page.title}}</h1>
</div>
<div data-role="content">
<div class="content-side">
<ul data-role="listview" data-inset="true">
<li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
{{menu.title}}
</li>
</ul>
<div class="logo"></div>
</div>
<div class="content-main">
Typical Page
</div>
</div>
</div>
<div data-role="page" id="{{page.id}}Video" ng-repeat="page in pages" ng-if="page.videoPage">
<div data-role="header" data-theme="h">
<a data-rel="back" data-icon="arrow-l">Back</a>
<h1 class="vidTitle"></h1>
</div>
<div data-role="content">
<div class="content-side">
<ul data-role="listview" data-inset="true">
<li ng-repeat="menu in pages" data-theme="{{menu.title == page.title && 'h'}}">
{{menu.title}}
</li>
</ul>
<div class="logo"></div>
</div>
<div class="content-main">
Video Page
</div>
</div>
</div>
</body>
ng-if is new as of 1.1.15 so make sure you're using a new (currently unstable) version of Angular.
And, yes, you can mix ng-if with ng-repeat. Here's a fiddle showing it in action (using 1.2): http://jsfiddle.net/rbQry/1/
Note this line (switch the ng-if to "true" and the repeat comes back):
<li ng-repeat="phone in phones | filter:query" ng-if="false">