I have an ng-repeat with 2 filters:
<div class="container">
<div ng-repeat-start="addresses in Address.Entries | filter:{IsRegistered: true} | filterDate:'InfoDetails'">
{{ addresses.name }}
{{ addresses.number }}
{{ addresses.email }}
{{ addresses.contact}}
</div>
</div>
How can i add an ng-show or ng-hide to the with class="container" to only show this element if the length of items repeated in the ng-repeat is greater than zero?
You need to assign the filter results to a new variable in order to account for the length of the filtered list.
Then you can use the new variable to show/hide the section.
Working Fiddle
<div class="container" ng-show="filtered.length > 0">
<div ng-repeat-start="addresses
in filtered = (Address.Entries
| filter:{IsRegistered: true}
| filterDate:'InfoDetails')">
{{ addresses.name }}
{{ addresses.number }}
{{ addresses.email }}
{{ addresses.contact}}
</div>
</div>
Try to write a separate function which will send back the true/false (which will determine the ng-show) in your controller.
Something like following,
<div class="container" ng-show="functionToDeterminetheState()">
<div ng-repeat-start="addresses in Address.Entries | filter:{IsRegistered: true} | filterDate:'InfoDetails'">
{{ addresses.name }}
{{ addresses.number }}
{{ addresses.email }}
{{ addresses.contact}}
Related
I am trying to write code in “moto” list.html section. I would like to display all pages from “auta” section with paging. So, I need to display posts from another section with paging.
I use hugo v0.96.
I am not sure, why it’s not working with paging.
Not working code with paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ $paginator := .Paginate $cars }}
{{ range $paginator.Pages}}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Working code without paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ range $cars }}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Where’s the problem?
Please, help me. Thank you very much
The problem has been solved. .Paginate can be only one time on same page.
I had .Paginate in header (out of this code). And it's not posibble override (by official docs of Hugo)
How can I hide/remove the containing <div> element when the value is empty:
<div class="small" ng-show="ID !== ''">{{ info.ID }} | </div>
Renders:
<div class="small">|</div>
Can I remove the <div> completely if empty? I've tried:
<div class="small" ng-show="!ID">{{ info.ID }}</div >
You are checking value of ID property which is not the ID within info object so use info.ID within the ng-show.
<div class="small" ng-show="info.ID">{{ info.ID }} | </div>
<!-- -----------------------^^^^^^^----------------------->
If you don't want to render the element itself then use ng-if directive since ng-show directive simply hide using some CSS.
<div class="small" ng-if="info.ID">{{ info.ID }} | </div>
<!-- ---------------------^^^^^^^----------------------->
If you only want to hide the element then use:
<div class="small" [hidden]="info?.ID">{{ info?.ID }}</div>
If you alse want to avoid rendering it (which is better in most cases) then use:
<div class="small" *ngIf="info?.ID">{{ info?.ID }}</div>
Use the Elvis operator otherwise you may get this mistake:
Can't get ID of null
I have this as my template:
{{ partial "header.html" . }}
<div style="padding-top:50px"></div>
<div class="grid">
<div style="background-color: #fce473; padding: 10px" class="{{ .Params.left_col_size }}">
<h1>left</h1>
<div class="grid">
<div id="content2"></div>
{{ partial "ui-components/barchart_content2.html" }}
</div>
</div>
<div style="background-color: #7bbf51; padding: 10px" class="{{ .Params.right_col_size }}">
right
</div>
</div>
{{ .Content }}
{{ partial "footer.html" . }}
which successfully loads the partial "ui-components/barchart_content2.html".
However, what I really want to is something like this:
....
<div id="content2"></div>
{{ partial "ui-components/{{ Params.ui-component }}" }}
....
and then in the content do this:
+++
....
ui-component = "barchart_content2.html"
+++
so that the content editors can choose which partial is rendered without having to touch the html template.
Is something like this possible in Hugo? thanks
Yes, you can use the printf function to do this. Try this:
{{ partial (printf "ui_components/%s" .Params.ui_component) . }}
And the corresponding front matter:
+++
ui_component = "barchart_content2.html"
+++
Note that I have changed your variable of ui-component to ui_component, as hyphens are not allowed in Hugo variable names.
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:'!'+test">
{{ x }}
</li>
</ul>
How to display all the items in list initially and then exclude the items as i type? Initially, none of the items are displayed. Only after i type something in textbox, it displays the items excluding the one which i typed.
You are missing angularjs strict:true operator in filters
this is what you need
<li ng-repeat="x in names | filter:'!'+test:true">
{{ x }}
</li>
Plnkr
On top of my head setting an initial value in model $scope.test = '' should resolve the issue for you.
No need of this '!' ,you just have to pass ng-model value
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter:test">
{{ x }}
</li>
</ul>
This does not seem possible, but is it:
<div ng-repeat="item in myitems | {{ searchfilter }}">
<span>{{ item.title }}</span>
</div>
or some variant of it? All I get are no results.
searchfilter should not have {{ }} around it. Since this is a directive, angular knows how to deal with the variable. You only need the braces when trying to inject a variable from angular scope into the non-angular HTML.
You should correct syntax to this instead:
<div ng-repeat="item in myitems | filter:searchfilter">
With Search filter Moustaches :<span>{{ item.title }}</span>
</div>
Have created a small plunk for reference.
http://plnkr.co/edit/tpl:rfqcl9AHEoJZEEJxyNn2?p=preview