I'm trying to do a ng-repeat inside the view returned by a directive.
Here is my template defined in templateUrl
<div class="outside">
<div class"inside" ng-repeat="copas as cup">
{{ cup.nombre }}
cupcakes.nombre
{{ cup }}
cupcakes
</div>
{{ copas[0].nombre }}
{{ copas }}
</div>
The content inside "inside" class is empty, while the content at the bottom of outside class is correct.
What am I missing?
thank you
It should be cup in copas for your ngRepeat expression:
<div class="outside">
<div class"inside" ng-repeat="cup in copas">
{{ cup.nombre }}
cupcakes.nombre
{{ cup }}
cupcakes
</div>
{{ copas[0].nombre }}
{{ copas }}
</div>
Related
I'm working with tooltip in ngx-bootstrap, and want to pass data to the ng-template being to the tooltip. The documentation provides [tooltipContext], but it didn't seem to be working. I have provided a code snippet.
HTML:
<ng-template #tooltipTmpl let-view="view">
<div class="tooltip-section">
<div class="section-title">
{{ view.dateRangeText }}
</div>
<div class="section-text">
{{ view.data }}
</div>
</div>
</ng-template>
<div
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl"
[tooltipContext]="{view: view}"
containerClass="white-tool-tip"
placement="top"
>
<div class="sub-title">
{{ view.title }}
</div>
</div>
REF: https://valor-software.com/ngx-bootstrap/#/tooltip
I have used bootstrap popover in my projects, so would recommend using popover.
Also, there was an issue created on GitHub but the user ended up using popover -
https://github.com/valor-software/ngx-bootstrap/issues/4775
#Yiu Pang Chan - you can have views array with following approach.
In app.component.html file
<div *ngFor="let view of views; let i = index">
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl" on-mouseover="setTooltipData(view)" >
Show me tooltip with html {{ view.title }}
</button>
</div>
<ng-template #tooltipTmpl>
<h4>
{{ viewDateRangeText }}
</h4>
<div>
<i>
{{ viewData }}
</i>
</div>
</ng-template>
In app.component.ts file
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
public viewDateRangeText: string;
public viewData: any;
setTooltipData(view: any){
viewDateRangeText = view.dateRangeText;
viewData = view.data;
}
}
I have face the same problem , so far I have check the source code the tooltipContext mark as deprecated you can do a work a round thi like this
you can still access to the view property inside the ng-template
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl">
Show me tooltip with html {{ view.title }}
</button>
<ng-template #tooltipTmpl>
<h4>
{{ view.dateRangeText }}
</h4>
<div>
<i>
{{ view.data }}
</i>
</div>
</ng-template>
demo 🔥🔥
Updated 🚀🚀
incase you want to use my solation with array of views , you juest need to move ng-template to the body of the ngFor.
template
<ng-container *ngFor=" let view of views">
<button type="button" class="btn btn-success"
*ngIf="view.isVisible"
[tooltip]="tooltipTmpl">
Show me tooltip with html {{ view.title }}
</button>
<ng-template #tooltipTmpl>
<h4>
{{ view.dateRangeText }}
</h4>
<div>
<i>
{{ view.data }}
</i>
</div>
</ng-template>
<br>
<br>
</ng-container>
demo 🚀🚀
#rkp9 Thanks for the codes. It does solve the issue, but it added viewDateRangeText, viewData, and setTooltipData in the TS codes.
I went with the approach #MuhammedAlbarmavi suggested, since it is without extra variables and functions. The comment on Github didn't have the configuration that we need for popover to act like a tooltip. I have it in the following.
<ng-template #tooltipTmpl let-view="view">
<div class="tooltip-section">
<div class="section-title">
{{ view.dateRangeText }}
</div>
<div class="section-text">
{{ view.data }}
</div>
</div>
</ng-template>
<div
[popoverContext]="{ view: view }"
[popover]="tooltipTmpl"
triggers="mouseenter:mouseleave"
placement="top"
>
<div class="sub-title">
{{ view.title }}
</div>
</div>
How to implement this syntax of Laravel below inside a Vue.js component?
#if(!Auth::guest())
#if(Auth::user()->id === $post->user->id)
<a href=#>edit</a>
#endif
#endif
This works now
<example-component :user="{{json_encode(Auth::user())}}"></example-component>
Exemple.vue
<template>
<p>{{ user.name }}</p>
</template>export default {props : ['user']}
In vuejs, is there a way to set the same content for multiple slots without copy pasting?
So this:
<base-layout>
<template slot="option">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
<template slot="singleLabel">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Could be written that way:
<base-layout>
<template slot="['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
Thanks a lot.
You could try using v-for for that.
<base-layout>
<template :slot="slotName" v-for="slotName in ['option', 'singleLabel']">
<span :class="'flag-icon-' props.option.toLowerCase()" />{{ countriesByCode[props.option] }}
</template>
</base-layout>
See working example.
I am using django 1.7 & python 2.7. It is all still quite new to me so I am still learning.
I am also using django-templatetag-handlebars in my templates.
I have a dynamic template that uses the same template code several times in the same template.
How do I declare the repeated code once and then reference it where I need it? Handlebars.js uses partials, but I am not so sure how I can use partials in the django-templatetag-handlebars.
Here is my template code:
{% load templatetag_handlebars %}
{% tplhandlebars "address_details_live_preview_template_ltr" %}
....
{{# if address_style_01 }}
{{! Address Style: 1 }}
{{# if address_line_1 }}
{{ address_line_1 }}<span class="spacer"></span>
{{/if}}
{{# if address_street_details }}
{{ address_street_details }}<span class="spacer"></span>
{{/if}}
{{# if address_locality }}
{{ address_locality }}<span class="spacer"></span>
{{/if}}
{{# if address_country_name }}
{{ address_country_name }}
{{/if}}
{{else}}
....
Here are the resources:
JSON
{
"badges":{
"unlocked": [
{"name": "Win 1"},
{"name": "Win 2"},
{"name": "Win 3"}
],
"locked":[
{"name": "Lose 1"},
{"name": "Lose 2"},
{"name": "Lose 3"}
]
}
}
Algorithm
{{ if_has_badges }}
<div class="badges">
<h1>Badges</h1>
{{ if_has_badges_unlocked }}
<div class="badges-unlocked">
<h2>Unlocked!</h2>
{{ loop_badges_unlocked }}
<a href="#" class="badge">
<strong>{{ name }}</strong>
</a>
{{ end_loop_badges_unlocked }}
</div>
{{ end_if_has_badges_unlocked }}
{{ if_has_badges_locked }}
<div class="badges-locked">
<h2>Locked!</h2>
{{ loop_badges_locked }}
<a href="#" class="badge">
<strong>{{ name }}</strong>
</a>
{{ end_loop_badges_locked }}
</div>
{{ end_if_has_badges_locked }}
</div>
{{ end_if_has_badges }}
How I can write this algorithm to work with Mustache compiler?
I need to do this to work with two sides, first is the RubyOnRails application and the second is the client-side (JavaScript).
There are two solutions to your problem.
Using selections and inverted selections
Here is an example from the mustache documentation:
{
"repos": []
}
Template:
{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}
Output:
No repos :(
As you see the inverted selections let me do conditional logic. In your case it would look something like:
Json:
var viewModel = {
badges:[]//badges here
}
viewModel.anyBadges = badges.length >0;
Mustache:
<div class="badges-unlocked">
{{#anyBadges}}
<h2>Unlocked!</h2>
{{/anyBadges}}
{{#badges_unlocked}}
<a href="#" class="badge">
<strong>{{ name }}</strong>
</a>
{{/badges_unlocked}}
Don't do logic in logic-less templating
This is what I would do. If you have conditional logic in your Mustache templates I think you're doing it wrong. You can either use Handlebars instead which is much more advanced in this regard or move your logic someplace else (to your javascript).
Please see the Mustache readme
The best answer (for both Ruby and JavaScript) is to encapsulate your logic (the if_has_badges type questions) into a View class.
You can actually fake it for the little bit of logic you need in both Ruby and JavaScript by using the array length property:
{{# badges.length }}
<div class="badges">
<h1>Badges</h1>
{{# badges.unlocked.length }}
<div class="badges-unlocked">
<h2>Unlocked!</h2>
{{# badges.unlocked }}
<a href="#" class="badge">
<strong>{{ name }}</strong>
</a>
{{/ badges.unlocked }}
</div>
{{/ badges.unlocked.length }}
{{# badges.locked.length }}
<div class="badges-locked">
<h2>Locked!</h2>
{{# badges.locked }}
<a href="#" class="badge">
<strong>{{ name }}</strong>
</a>
{{/ badges.locked }}
</div>
{{# badges.locked.length }}
</div>
{{/ badges.length }}
But that's a bit of a dirty way of doing it...