Does anyone know how to insert a named slot inside a loop?
I've got for example this code:
Children
<div v-for="num in nums" :key="num">
<slot name="foo"></slot>
</div>
And the parent is like:
<foo-component :nums="nums>
<template slot="foo">
<span>Inside the foo component</span>
</template>
</foo-component>
If I do so, the console will show this alert:
Duplicate presence of slot "foo" found in the same render tree - this will likely cause render errors.
Does anyone know how to accomplish that?
Thanks in advance
Slot names have to be unique. If you want to create slots inside a loop, you can add a number to the slot name, e.g.:
<div v-for="num in nums" :key="num">
<slot :name="'foo_' + num"></slot>
</div>
And then use them like this:
<foo-component :nums="3">
<template slot="foo_1">
<span>Inside the foo component slot 1</span>
</template>
<template slot="foo_2">
<span>Inside the foo component slot 2</span>
</template>
<template slot="foo_3">
<span>Inside the foo component slot 3</span>
</template>
</foo-component>
Related
I am working with angularJS ng-repeat. So, I want to use my ng-repeat value in another div. I am doing the following. But it doesn't loop through and give me the exact value.
Code in ng-repeat
<div uib-slide index="$index" class="uibSlider" ng-repeat='id in code' ng-click="$parent.ContentId = id.ContentId" ng-class="{'selected' : ContentId.Id === ContentId}">
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
Code in Another Div
<div>
<label>{{(code| filter: {Id: ContentId}: true)[1].ContentId}}</label>
</div>
So, the problem is I have bunch of data and in the another div if I make the array value from 0 to 1. i'm getting null value. But automatically the value isn't changing based on what I contentID select. It always gives me the same value. I'm not sure where I'm going wrong.
Any Help would be appreciated.
You can use ng-repeat-start | ng-repeat-end
<div uib-slide ng-repeat-start='id in code'>
<paragraph tag>{{id.ContentId}}</paragraph tag>
</div>
<div ng-repeat-end>
<label>{{(id.ContentId}}</label>
</div>
If you are trying to show the same data in a modal, depending where the user clicks:
<div ng-repeat="id in code">
<!-- when the user clicks here, the modal will open. The ID will be the same as the one clicking -->
<a ng-click="openModal(id)">Open modal for id: {{id}}</a>
</div>
Then in your controller you will have a function called openModal which takes a parameter (id) that will open the modal and pass along the data.
I'd like for a way to select only visible elements in the DOM that are within a template that evaluates to true.
<template is="dom-if" if="[[true]]">
<span>I should be selectable</span>
</template>
<template is="dom-if" if="[[false]]">
<span>I should not be selectable</span>
</template>
I'm currently using this:
Polymer.dom(this.root).querySelectorAll("span");
which also returns nodes that are in <dom-if> templates that evaluate to false.
Is there any to do this without using restamp?
Is the a polymer equivalent for ng-show? Here's a snippet example of what I'm trying to convert:
<h1>Greeting</h1>
<div ng-show="authenticated">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div ng-show="!authenticated">
<p>Login to see your greeting</p>
</div>
dom-if is not necessary here. Simply use $= (attribute binding) to add/remove hidden attribute.
<style>
[hidden] {
display:none;
}
</style>
<h1>Greeting</h1>
<div hidden$=[[!authenticated]]>
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</div>
<div hidden$=[[authenticated]]>
<p>Login to see your greeting</p>
</div>
Use dom-if to make decisions about blocks of code that you don't want to be rendered, not just hidden.
I guess you could use dom-if to conditionally keep required HTML in DOM tree. properties should be defined there in properties of component.
<template is="dom-if" if="{{authenticated}}">
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
<p>Login to see your greeting</p>
</template>
True and False will work once you add template with in template. I tried
<template>
<template is="dom-if" if="{{authenticated}}">
{{authenticated}}
<p>The ID is {{controller.greeting.id}}</p>
<p>The content is {{controller.greeting.content}}</p>
</template>
<template is="dom-if" if="{{!authenticated}}">
{{authenticated}}
<p>Login to see your greeting</p>
</template>
</template>
If you will not add template with in template True, false will never work. It will always show you the first template wheather you have True or False value of properties.
Hope it works.
This can be a dumb question. But I hope you can help me with this. I'm doing something like this:
<div ng-repeat="item in list" class="display-item">
<ng-include src="mytemplate.html"></ng-include>
<div ng-if="($index%2) == 0">
<p>An inserted content when index is an even number.</p>
</div>
</div>
Now this is working. The problem starts when I'm making the page responsive in all devices, cause you see when I inserted the p tag, it was created inside the parent div tag with the class display-item. What I want to do is put it outside the div tag so when the screen is smaller the p tag will not be affected by the parent tag and vise versa. So something like this:
<div ng-repeat="item in list" class="display-item">
<ng-include src="mytemplate.html"></ng-include>
</div>
<div ng-if="($index%2) == 0">
<p>An inserted content when index is an even number.</p>
</div>
Now the problem with the code above is $index is undefined on that part of the code and I know ng-repeat will finish iterating first before going to the second div.
Thanks in advance!
This can be easily done by using ng-repeat-start and ng-repeat-end
Try like this:
<div ng-repeat-start="item in list" class="display-item">
<ng-include src="mytemplate.html"></ng-include>
</div>
<div ng-repeat-end ng-if="($index%2) == 0">
<p>An inserted content when index is an even number.</p>
</div>
#Jed, could you put a class tag on the ng-if div for an outer div? Say
<div ng-if="($index%2)" class="outer-div-you-want">
Just a thought to try.
i repeat things in ng repeat like so
<div class="" ng-repeat="deutscheBankEvent in deutscheBankEvents">
<div class="schrottler-opened schrottler" title="">
<span class="presse_ueber" style="font-size:22px;margin-left:10px;font-weight: normal;margin-top:5px">{{deutscheBankEvent.name}}</span>
</div>
<!-- data-ng-repeat also possible-->
<div class="">
<div class="presse_content">
<Div style="color:white">{{deutscheBankEvent.name}}</div>
<ul class="liste_k">
<li ng-repeat="list in deutscheBankEvent.list">
{{list}}
</li>
</ul>
</div>
</div>
later down the code comes up a form to register to events. the form is hidden until user selects a place and date via select. this is triggered like so:
<span ng-show="myForm.locationDate.$valid">
my issue now is: this shows up all hidden form elements when one select is valid.
how can i set the scope to only this one changed?
Since ng-repeat creates a new scope, changing ng-show/ng-hide conditions to scope bound properties will work perfectly (example).