I want to show all industries, major, and skills that belong to the selected user. I'm stuck with the syntax. this is my code. the first row is correct but all other rows i need to link the user. eg: $major->myUsers->mySkills as $skills
#foreach($user->myIndustries as $industry)
<h4> {{ $industry->title }}</h4> <br>
#foreach( $industry->myMajors as $major)
<B>{{ $major->title }} - </B>
#foreach($major->mySkills->unique() as $skills)
{{ $skills->name }}
#endforeach
<br>
#endforeach()
#endforeach
Try this code:
#foreach($user->myIndustries as $industry)
<h4> {{ $industry->title }}</h4> <br>
#foreach( $industry->myMajors as $major)
<B>{{ $major->title }} - </B>
#foreach($major->mySkills->unique() as $skills)
{{ $skills->name }}
#endforeach
<br>
#endforeach
#endforeach
Related
In Hugo, I have a list page with content from related pages that all have a number of categories assigned in their frontmatter. I want to show all content initially, but give the option to show only specific content based on user selection with Alpine.js. There are numerous examples online how this can be done, but I seem to fail at the point where I populate the categories and compare them to the user input.
I manage to get all the categories into a select dropdown. I can also get the individual pages' categories as [category1 category2 category3].
This is my code:
<div x-data="{ selected: 'placeholder' }">
<select x-model="selected" placeholder="Please Select" class="">
<option value="placeholder" selected disabled>Select</option>
{{ $categories := $.Site.Taxonomies.categories.Alphabetical }}
{{ range $categories }}
{{ if .Term }}
<option value=".category-{{ .Term }}" x-hide:selected="selected === .category-{{ .Term }}">{{ .Term }}</option>
{{ end }}
{{ end }}
</select>
{{ range .Pages }}
<div x-show="selected == {{ .Params.Categories }}" x-cloak>
<a href="{{ .RelPermalink }}">
<img src="{{ .Params.coverimage }}">
<div>
{{ .Title }}
</div>
</a>
</div>
{{ end }}
</div>
I'm trying to display up to three related articles at the bottom of a blog post using Hugo.
I have some test code where I get data for front matter fields like Title and Summary, but I can't access Image.
Not sure what I am doing wrong
{{ $related := .Site.RegularPages.Related . | first 3 }}
{{ with $related }}
<div class="related-content">
<h2>Related content</h2>
<ul class="article-gallery">
{{ range . }}
<li>
<div class="card">
<a class="button" href="{{ .RelPermalink }}">
<img src="" alt ="">
</a>
<div>
<h3>{{ .Title }}</h3>
</div>
<pre>
{{.RelPermalink}}
{{.Title}}
{{.Summary}}
{{.}}
{{.ReadingTime}}
</pre>
<!-- Cannot Access Image -->
<pre>
{{.Image}}
</pre>
</div>
</li>
{{ end }}
</ul>
</div>
{{ end }}
Custom, user-defined data elements in a page's front matter needs to be accessed through .Params:
{{ .Params.Image }}
See The Hugo Docs
Note: there is a predfined "images" (with an 's') that can be accessed directly. Did you mean to use that instead?
https://jsfiddle.net/n4qq4vxh/97/
I am building tables to describe packages selected when making a car. The dark grey is the whole package(ie luxury package), the lighter grey is the items that are currently included in the package. Lastly, the rows with carrots are the 'alternative' options that can replace something that is currently in the package. For example, you can click the 'Leather Dakota Saddle Brown Stitching' and it would replace the 'Oyster Dakota Leather'. Everything works correctly but i need to display it differently.
I need to show the alternatives for each currently selected item(if applicable) under its correct parent, as opposed to just a list of all alternatives at the end. For example, the alternative rims should be displayed directly under the selected rims, the alternative leathers should be displayed directly under the selected leather, etc.
I am not sure that posting my code will help much but please see below. Basically what i am looking for is to find out if there is a way to start repeating through current package content, then compare the alternatives to see if it is a leather, wheel, etc as the parent is...if it is, repeat over the alternatives. Once finished repeating over the alternatives, move back to the next item that is selected in the package. I have tried messing around with this and cannot seem to find a solution/strategy.
How i would like it to appear:
Luxury package
package item: 18" rims
Alt Rim 1
Alt Rim 2
Alt Rim 3
package item: dakota leather
Alt leather 1
Alt leather 2
Alt leather 3
<tbody ng-repeat="package in allOptions | orderBy: 'listPrice'" ng-if="package.isPackage">
<tr class="hover" ng-class="{'selected':isSelected(package)}" ng-click="addRemoveOption(package)" **MAIN PACKAGE **>
<td> {{ package.code }} </td>
<td> {{ package.name }} </td>
<td> {{ package.listPrice | currency }} </td>
<td> {{ package.disclaimer }} </td>
<td> {{ package.salesGroup.name }} </td>
<td> {{ package.optionPrev }} </td>
<td> {{ package.familyCode }} </td>
</tr>
<tr ng-repeat="item in package.packageItems" ng-class="{'nested-selected':isSelected(package)}" id="nested" ** CURRENT PACKAGE CONTENT **>
<td> {{ item.code }} </td>
<td> {{ item.name }} </td>
<td> {{ item.comboPrice | included }} </td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- ng-if="hasAlternatives(package.packageItems)" -->
<tr ng-if="package.packageItems.alts.length" class="nested-alt" ng-repeat="alt in package.packageItems.alts" ng-click="addPackageOption(alt,package)" ng-hide="!isSelected(package)">
** ALTERNATIVES **
<td><span class="glyphicon glyphicon-menu-right" ng-click="addPackageOption(alt,package)"></span></td>
<td> {{ alt.code }} </td>
<td> {{ alt.name }} </td>
<td> {{ alt.price | included }} </td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
I was able to fix this with the following code. Basically, what it came down to was not using a table but instead making my own table with div's. This way i was able to provide the full scope 3 layers down the table, while with a standard table i was only able to go two 2 layers deep.
<h3>{{ tableName }}</h3>
<div class="flx flx-column hover packageTable"
ng-repeat="package in list | orderBy: 'listPrice' track by $index"
ng-class="{'selected': package.isSelected}"
ng-click="addRemoveOption(package)">
<div class="flx flx-row" id="anchor{{$index}}">
<div class="flx-cell-1">{{ package.code }}</div>
<div class="flx-cell-1">{{ package.name }}</div>
<div class="flx-cell-1">{{ package.listPrice | currency}}</div>
<div class="flx-cell-2">{{ package.disclaimer }}</div>
<div class="flx-cell-1">{{ package.salesGroup.name }}</div>
<div class="flx-cell-1">{{ package.optionPrev }}</div>
<div class="flx-cell-1">{{ package.familyCode }}</div>
</div>
<br>
<div class="flx flx-column" ng-repeat="item in package.packageItems track by $index"
ng-class="{'package-nested-selected': package.isSelected}"
>
<div class="flx flx-row" id="nested">
<div class="flx-cell-1">{{ item.code }}</div>
<div class="flx-cell-1">{{ item.listPrice | included }}</div>
<div class="flx-cell-2">{{ item.name }}</div>
<div class="flx-cell-1"></div>
<div class="flx-cell-1"></div>
<div class="flx-cell-1"></div>
</div>
<div class="flx flx-row package-nested-alt"
ng-if="item.alts.hasOwnProperty(item.code)"
ng-hide="!package.isSelected"
ng-repeat="alt in item.alts[item.code] track by $index"
ng-click="addPackageOption(alt, package, $event)"
>
<div class="flx-cell-1" id="packageArrow"><span class="glyphicon glyphicon-menu-right" /></div>
<div class="flx-cell-1">{{ alt.code }}</div>
<div class="flx-cell-1">{{ alt.price | included }}</div>
<div class="flx-cell-2">{{ alt.name }}</div>
<div class="flx-cell-1"></div>
<div class="flx-cell-1"></div>
<div class="flx-cell-1"></div>
<!--<div class="flx-cell-1"></div>-->
</div>
</div>
</div>
This is what I have so far:
<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === {{ storeSection.category }}">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
Basically, I only want to display the items in main.ingredients that have the same category as the header, but I cannot access {{ storeSection.category }} once I use a new ng-repeat. Any ideas?
<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === storeSection.category">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
<div ng-repeat="storeSection in main.foodBySection" ng-show="main.sortBy === 'storeSection'">
<h4>{{ storeSection.category }}</h4>
<div ng-repeat="ingredient in main.ingredients | orderBy: 'name'"
ng-if="ingredient.storeSection === storeSection.category ">
<p><input type="checkbox" ng-model="ingredient.added"/> {{ ingredient.name }} <span
class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
</div>
Don't interpolate storeSection.category, ng-if works with angular-expressions just like the left-hand operandingredient.storeSection is getting evaluated by it
As pointed out in another answers, the cause of the problem is that you're using interpolation in your ngIf directive, which one works with angular-expressions.
Tips:
Use preferably ngIf instead of ngShow(in your first <div>).
I also recommend you to use the native filter instead of this check using ngIf(in ngRepeat) and to use the ngRepeat#special-repeats.
So you can have something like this:
<div ng-repeat-start="storeSection in main.foodBySection" ng-if="main.sortBy === 'storeSection'">
<h4 ng-bind="storeSection.category"></h4>
</div>
<div ng-repeat-end ng-repeat="ingredient in main.ingredients | filter: { storeSection: storeSection.category } | orderBy: 'name'">
<p>
<input type="checkbox" ng-model="ingredient.added" /> {{ ingredient.name }} <span class="ingredient-source">- {{ ingredient.source }}</span></p>
</div>
I have a list with ng-repeat in angular and a button which toggle checked property in all items (1.4):
<button ng-click="selectAll()">select all</button>
example 1:
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.checked"> {{ item.name }}
</li>
example 2:
<li ng-repeat="item in items">
<span class="glyphicon" ng-class="{'glyphicon-ok': item.checked}"></span> {{ item.name }}
</li>
example 3:
<li ng-repeat="item in items">
<span class="glyphicon glyphicon-ok" ng-show="item.checked"></span> {{ item.name }}
</li>
example 4:
<li ng-repeat="item in items">
<span>{{ item.checked }}</span> {{ item.name }}
</li>
Performance of example 1 and 4 is OK. But example 2 and 3 has almost 1 sec. lag. There about 200 items in the array.
Why the performance is so different? I would like to have custom "checkboxes" with glyphicon - so I would like to have example 2 work but the performance is bad
You can try the following for example 2:
<li ng-repeat="item in items track by item.checked">
<span class="glyphicon" ng-class="{'glyphicon-ok': item.checked}"></span>
{{ item.name }}
</li>
For example 3, try this:
<li ng-repeat="item in items track by item.checked">
<span class="glyphicon glyphicon-ok" ng-if="item.checked"></span> {{ item.name }}
</li>