I'm working on an item_selector directive, I want to add an indicator for archived element, this is the item selector template .haml :
.directive-items-selector{ ng_click: "openItemsSelector( $event )" }
.wrapper
%ui_select.ui-select{ ng: { model: "input.model", disabled: "disabled",
change: "itemSelectModelChanged()" },
search_enabled: "{{ options.searchable }}" }
%ui_select_match.ui-select-match{ items_selector_match: '',
placeholder: "{{ input.placeholder }} ",
allow_clear: "{{ options.clearable }}",
title: "{{ $select.selected.label }}" }
%i.fa{ ng_class: 'icon' }
%span{'ng': {'class': "{'is-archived': $select.selected.object.is_archived === true}"}}
{{ $select.selected.label }}
%ui_select_choices.ui-select-choices{ repeat: "item.id as item in input.filteredItems track by item.id",
refresh: "reloadItems( $select.search )",
refresh_delay: '{{ input.filterDelay }}' }
.item{ ng_attr_title: "{{ ::item.label }}" }
.item-label {{ ::item.label }}
%small.item-details {{ ::item.details }}
.items-selector-actions
%a.pointer.action{ ng: { if: 'linkToModal', click: 'openDetails()', disabled: "!model" }}
{{ 'btn.details' | translate }}
%a.pointer.action{ ng: { if: 'createButton && klassName && !disabled', click: 'createItem()' }}
{{ 'btn.new' | translate }}
I've add a through line css propoerty to archived element by :
%span{'ng': {'class': "{'is-archived': $select.selected.object.is_archived === true}"}}
{{ $select.selected.label }
and I want to add a mouse hover indicator that tell user "this element is archived", I thought about ng_if multiple condition in this attribute of ui_select.ui-select : title: "{{ $select.selected.label }}"
*
if $select.selected.object.is_archived return true : costume message
else {{ $select.selected.label }
*
Related
I have a code in the hugo template engine that should add a script if the parameter in the article is equal to the desired value.
Front Matter articles. Here I need the header_class parameter
---
title: "Replaced header"
header_class: "replaced-header"
---
If header_class = "replaces-header" output the code. I tried to implement it like this:
{{ if isset .Params.header_class "replaced-header" }}
<script>
let replacedHeader = document.querySelector('.replaced-header');
window.onscroll = function() {
let breakPoint = 100;
let scroll = window.pageYOffset || document.documentElement.scrollTop;
if(scroll > breakPoint) {
replacedHeader.classList.add('replaced-header--scrolled');
}
};
</script>
{{ end }}
The code doesn't work. How should a condition be set in this case?
Got a reply on another forum, post it here. Any of these three methods will work:
{{ if isset .Params "header_class" }}
{{ .Params.header_class }}
{{ end }}
{{ with .Params.header_class }}
{{ . }}
{{ end }}
{{ with .Param "header_class" }}
{{ . }}
{{ end }}
Or like this:
{{ with $.Param "header_class" }}
{{ if ( eq . "replaced-header") }}
My script
{{ end }}
{{ end }}
Using Hugo, I need add unique class names to the first few posts. How can this be done?
My code that's obviously not working…
// if the first post
{{ if eq .Site.GetPage 1 }}
{{ $classname := "class-one" }}
// else the second post
{{ elseif eq .Site.GetPage 2 }}
{{ $classname := "class-two" }}
// else the third post
{{ elseif eq .Site.GetPage 3 }}
{{ $classname := "class-three" }}
{{ else }}
{{ end }}
<li class="{{ $classname }}">
…
</li>
Maybe there's some more efficient way, but this works:
{{ $paginator := .Paginate (where .Data.Pages.ByDate.Reverse "Type" "post") }}
{{ range $index, $element := $paginator.Pages }}
{{ if (eq $index 0) }}
{{ $.Scratch.Set "classname" "class-one" }}
{{ else if (eq $index 1) }}
{{ $.Scratch.Set "classname" "class-two" }}
{{ else }}
{{ $.Scratch.Set "classname" "" }}
{{ end }}
<li class="{{ $.Scratch.Get "classname" | safeHTML }}">
…
</li>
{{ end }}
I have this html :
<div class="{{ article.contributor }}" ng-repeat="article in articles">
Which gave me this :
<div class="["harry", "eddy", "john"]">
But I want this :
<div class="harry eddy john">
What is the best way to do this ?
Thank you very much
Try joining the array, like this:
<div class="{{ article.contributor.join(' ') }}" ng-repeat="article in articles">
Ohhh the choices... joyous choices.
Quick and dirty...
<div class="{{ typeof article.contributors === 'array' ? article.contributors.join(' ') : article.contributors }}" ng-repeat="article in articles"></div>
As a filter...
myAppname.module.filter('spaceSeperatedValues', function() {
return function(data){
//handles if just a string (e.g., 'John')
return data === 'array' ? data.join(' ') : data;
}
}
<div class="{{ article.contributors | spaceSeperatedValues }}" ng-repeat="article in articles"></div>
As a controller function..
app.module.controller('ArticleController', ['$scope'], function ($scope) {
$scope.articles = [{ text : 'my article text', contributors : ['harry', 'eddy', 'john'] }]
$scope.spaceSeperatedValues = function(data) {
//handles if just a string (e.g., 'John')
return data === 'array' ? data.join(' ') : data;
}
}
<div ng-controller="ArticleController">
<div class="{{ spaceSeperatedValues(article.contributors) }}" ng-repeat="article in articles"></div>
</div>
Have not checked this code in a debugger... <-- disclaimer. :D
Given the following data:
{
id: "",
title: "",
// modes
one: {
stage: 1,
order: 3,
more: "",
}
two: {
stage: 14,
order: 5,
more: "",
}
// ...
},
// ...
how can I combine the following two pieces of code into one that uses a variable as a switching mechanism for the mode?
// If selected mode was "one"
<li ng-repeat="item in items | orderBy: ['one.stage', 'one.order']
| filter: oneFilter" ng-class="{ topline: isNewOneStage( item )}">
{{ item.title }},
{{ item.one.stage }}
// ...
</li>
// If selected mode was "two"
<li ng-repeat="item in items | orderBy: ['two.stage', 'two.order']
| filter: twoFilter" ng-class="{ topline: isNewTwoStage( item )}">
{{ item.title }},
{{ item.two.stage }}
// ...
</li>
Since the two pieces of code are completely identical - apart from the mode - I would like to avoid code duplication. (Note also that there will eventually be more than just two modes.)
I agree with Michael that you should probably reorganize your code, but if you must have it all at once you can do this depending on what version of angular you are using:
// variable mode is either 'one' or 'two'
<li ng-repeat="item in items | orderBy: [ mode + '.stage', mode + '.order']
| filter: (mode == 'one' ? oneFilter: twoFilter)" ng-class="{ topline: (mode == 'one' ? isNewOneStage: isNewTwoStage)( item )}">
{{ item.title }},
{{ item[mode].stage }}
// ...
</li>
I am trying to create a dropdown menu using angular ng-repeat.
I have a jd object with a field called parent_id which indicates parent node under which this node should show up. Help I need is to create filter based on previous filtered data as shown in the markup
My markup code:
<div >
<ul class="nav nav-pills" data-ng-controller= "MenuController" >
<li data-ng-class="{'active':getClass('/customers')}"
data-ng-repeat="menuItem in menuItems | filter: { ParentId: '0' }" >
{{ menuItem.Name }}
**<ul>
<li data-ng-repeat="menuItem1 in menuItems | filter: { ParentId: {{ menuItem1.ParentId }} }">
{{ menuItem1.Name }}
</li>
</ul>**
</li>
</ul>
</div>
My Service:
app.service('menuService', function () {
this.getMenuItems = function () {
return menuItems;
};
var menuItems = [
{
id: 'ABCDFER1', Name: 'Apperal', ParentId: 0, description: 'Beautifull Apparels'
},
{
id: 'ABCDFER2', Name: 'Electronics', ParentId: 0, description: 'Electronic bargains'
},
{
id: 'ABCDFER3', Name: 'Home & Kitchen', ParentId: 0, description: 'For your kitchen'
},
{
id: 'ABCDFER4', Name: 'Services', ParentId: 0, description: 'Services for you'
},
{
id: 'ABCDFER5', Name: 'Men', ParentId: 'ABCDFER1', description: 'Men Apperal'
},
{
id: 'ABCDFER6', Name: 'Women', ParentId: 'ABCDFER1', description: 'Women Apperal'
}
];
My controller:
$scope.menuItems = menuService.getMenuItems();
If I correctly understand what you're trying to accomplish, I believe you want this:
<div >
<ul class="nav nav-pills" data-ng-controller= "MenuController" >
<li data-ng-class="{'active':getClass('/customers')}"
data-ng-repeat="menuItem in menuItems | filter: { ParentId: '0' }" >
{{ menuItem.Name }}
<ul>
<li data-ng-repeat="menuItem1 in menuItems | filter: { ParentId: menuItem.id }">
{{ menuItem1.Name }}
</li>
</ul>
</li>
</ul>
</div>
Changes of note:
You want to filter on the id of the parent item, not the parentId of
the current item.
You don't need {{ }} around the filter value, because this is interpreted as code, not a template.