I have the following yaml template : consultant.yaml
title: myTitle
content: myContent
cards:
- card:
title: Title 1
args:
arg1: "blablabla 1"
arg2: "blablabla 2"
- card:
title: Title
args:
arg1: "blablabla 3"
arg2: "blablabla 4"
arg3: "blablabla 5"
I want to display each arg[x] of my card element using an index and not the key itself. I read about the index function and it seems to be possible.
Hugo doc :
Soluton 1 : index COLLECTION INDEX
Solution 2 : index COLLECTION KEY
I want to use Solution 1.
I have the following HTML template : single.html
{{ range .Site.Data.consultant.consultant.cards }}
<div class="col-md-4 col-lg-4">
<div class="">
<div class="">
<h3 class=""> {{.title}} </h3>
</div>
<p>{{.args}}</p>
<p>{{ (index .args).arg1}}</p>
<p>{{ (index .args). 0}}</p>
</div>
</div>
{{end}}
the first p element display a map map[arg1:blablabla 1 arg2:blablabla 2] => OK
the second p element display the first value blablabla 1 => OK
the third p element display a map map[arg1:blablabla arg2:blablabla 2] => KO.
The third pshould display the first element just like the second one and I don't get why.
Looks like it was solved over on the Hugo forums:
https://discourse.gohugo.io/t/how-to-access-a-map-value-at-an-index-with-the-index-function/13330
<ul>
{{ range $test.cards }}
<li>{{.card.title}}
<ul>
{{range $key, $value := .card.args}}
<li>{{$key}}: {{$value}}</li>
{{end}}
</ul>
</li>
{{ end }}
</ul>
Related
I'm working with Hugo and have a question regarding where clause. Currently I am doing the following and it works fine. I attempted to add one more where argument and I got the error below:
Question: How do I add multiple nested arguments to Hugo where clause. I will continue to test it out in the meantime.
Error calling where: can't evaluate the array by no match argument or more than or equal to two arg:uments
Works:
{{ range where (where site.Pages "Type" "post") "Params.type" "featured" }}
<div class="ph1-ns w-50-ns flex">
{{ .Render "li" }}
</div>
{{ end }}
</div>
Fails:
{{ range where (where site.Pages "Type" "post") "Params.type" "featured" "Params.location" "nashville" }}
<div class="ph1-ns w-50-ns flex">
{{ .Render "li" }}
</div>
{{ end }}
</div>
Per Hugo:
Nest where Clauses
You can also nest where clauses to drill down on lists of content by more than one parameter. The following first grabs all pages in the “blog” section and then ranges through the result of the first where clause and finds all pages that are not featured:
I was able to resolve this, after reading some additional information at https://pkg.go.dev/text/template#pkg-overview; I went with the below.
<div class="w-100 flex-ns mhn1-ns flex-wrap mb3">
{{ range where (where site.Pages "Type" "post") "Params.featured" "!=" nil }}
{{ if(eq .Params.location "nashville")}}
<div class="ph1-ns w-50-ns flex">
{{ .Render "li" }}
</div>
{{ else}}
Coming Soon
{{end}}
{{end}}
</div>
I have these arrays inside Controller:
Public function home(){
$images = [
'img/image1.jpg',
'img/image2.jpg',
'img/image3.jpg',
'img/image4.jpg',
'img/image5.jpg',
'img/image6.jpg'
];
$rep_titles = [
'外国美女路亚鲈鱼图片合集',
'对人类有威胁的那些怪鱼 高清钓鱼图片',
'那些被钓到的长牙的鱼 高清图片',
'那些钓友去年钓上的巨物 高清图片',
'垂钓图片 那些痴迷的美女',
'冒雨征战秘密基地收获鳊鱼大板鲫',
],
}
and this, inside view:
1ST Content
#foreach (array_slice($images,0,3) as $keyIndex => $image)
<div class="r-c-collection-container">
<div class="img-content">
<img src="{{ asset( $image ) }}" alt="{{ $image }}">
</div>
<div class="r-c-content">
{{$rep_titles[$keyIndex]}}
</div>
</div>
#endforeach
2nd Content (where I want to start on a specific nth-item from the array, 3rd to be specific)
#foreach (array_slice($images,3,3) as $keyIndex => $image)
<div class="r-c-collection-container">
<div class="img-content">
<img src="{{ asset( $image ) }}" alt="{{ $image }}">
</div>
<div class="r-c-content">
{{$rep_titles[$keyIndex]}}
</div>
</div>
#endforeach
My problem is that, the items $rep_titles on the 2nd content goes back or loops back to the 1st item where the item should start on the 3rd item. I have no problem with the images because it starts where I want it to be. Is there a way to get around this?
According to the array_slice doc you unintentionally have reset the array index to zero. You need an extra fourth parameter (a boolean) to indicate you don't want that reset to take place, like this:
#foreach (array_slice($images, 3, 3, true) as $keyIndex => $image) {
// rest of your code
}
From http://php.net/manual/en/function.array-slice.php:
preserve_keys
Note that array_slice() will reorder and reset the integer array indices by default. You can change this behaviour by setting preserve_keys to TRUE. String keys are always preserved, regardless of this parameter.
I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5 keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work.
<li *ngFor="let tag of module.Tags; let i = index">
<a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a>
<div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div>
</li>
The feature here is that I don't want to show unlimited number of tags to the user, I want to limit it to only 5 tags, and have a button after 5 tags which will be used to show the dropdown with the remaining tags.
Is this possible to do in angular2?
If so, please enlighten me.
<li *ngFor="let tag of module.Tags | slice:0:5; let last=last">
{{ tag }}
<div *ngIf="last">DropDown Button</div>
</li>
https://angular.io/docs/ts/latest/api/common/index/SlicePipe-pipe.html
To get all added but the <div>DropDown Button</div> added after the 5th item you can use:
show = 5;
<li *ngFor="let tag of module.Tags|slice:0:show let i=index">
{{ tag }}
<div *ngIf="i==4 && show == 5" (click)="show = module.Tags.length">DropDown Button</div>
</li>
This list sets the value of abc according to the item clicked.
<ul>
<li><a ng-click="abc = 'score'">Score</a></li>
<li><a ng-click="abc = 'count'">Count</a></li>
<li><a ng-click="abc = 'average'">Average</a></li>
</ul>
List.items contains values that correspond to score, count and average. Items are ordered by the value of abc.
<ul>
<li ng-repeat="item in list.items | orderBy:'-' + abc">
{{ 'item.' + abc }}
</li>
</ul>
My only problem is this line: {{ 'item.' + abc }}
How do I bind the value of {{ item.score }}, {{ item.count }} or {{ item.average }} based on the value of abc?
Use [] object notation when object properties are variables. This is standard javascript practice
{{ item[abc] }}
I tried using ng-repeat value,group1,group2
i'm getting
grp1
grp2
abc
def
value1
value2
I need
grp1
abc
valu1
grp2
def
valu1
Html:
<ul>
<li ng-repeat="heading in group1"> {{heading}} </li> // heading
<li ng-repeat="subheading in group2"> {{subheading }} </li> // sub heading
<li ng-repeat="val in value"> {{val}} </li> // value
</ul>
JavaScript:
$scope.group1 = [grp1,grp2];
$scope.group2 = [abc,def];
$scope.value = [value1,value2];
use $index to get other sub values
<div ng-repeat="eachval in group1">
<p>{{ eachval }}</p>
<p style="margin-left:15px">{{ group2[$index]}}</p>
<p style="margin-left:25px">{{ value[$index]}}</p>
</div>
Here is the WORKING FIDDLE
You should use a single array with three different keys
$scope.arrayList = [{group1Name : 'grp1',group2Name: 'abc', valueName: 'val1'},
{group1Name : 'grp2',group2Name: 'def', valueName: 'val2'}]
htlm would look like this
<li ng-repeat="group in arrayList">
<div>{{group.group1Name}}</div>
<div>{{group.group2Name}}</div>
<div>{{group.valueName}}</div>
</li>
You can write a simple javascript to modify your 3 arrays in 1 array.
Hope this helps
Use ng-repeat start and end points to iterate the first array, then use $index to reference the other elements:
<ul>
<li ng-repeat-start="heading in group1">{{heading}}</li> // heading
<li> {{group2[$index]}} </li> // sub heading
<li ng-repeat-end> {{val[$index]}} </li> // value
</ul>