I have a ul with items coming from the loop, and then extra li after that.
<ul>
<todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
<li :key='"new_item"'>
<input placeholder="What needs to be done?" type="text" v-model="new_todo" >
<button v-on:click="add_todo()">Add</button>
</li>
</ul>
This doesn't show the extra line. But if I switch it so extra li is first it does.
<ul>
<li :key='"new_item"'>
<input placeholder="What needs to be done?" type="text" v-model="new_todo" >
<button v-on:click="add_todo()">Add</button>
</li>
<todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index" />
</ul>
So I'm probably doing something wrong with key, but I can't find what exactly.
The whole code is here.
The problem is that vue components require a closing tag and won't work properly just with self-closing tags.
Try like that:
<ul>
<todo-item v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></todo-item>
<li :key='"new_item"'>
<input placeholder="What needs to be done?" type="text" v-model="new_todo" >
<button v-on:click="add_todo()">Add</button>
</li>
</ul>
From the official Vue Style Guide:
Components that self-close communicate that they not only have no
content, but are meant to have no content. It’s the difference between
a blank page in a book and one labeled “This page intentionally left
blank.” Your code is also cleaner without the unnecessary closing tag.
Unfortunately, HTML doesn’t allow custom elements to be self-closing -
only official “void” elements. That’s why the strategy is only
possible when Vue’s template compiler can reach the template before
the DOM, then serve the DOM spec-compliant HTML.
You are not allowed to use self-closing tags, so instead of <todo-item /> use <todo-item></todo-item>
https://github.com/vuejs/vue/issues/1036
Not a valid HTML5 components it seems.
Do you use SFC or usual HTML files?
Maybe the problem is that HTML parser doesn't allow to use <todo-item> inside <ul>. Try to use <li :is="'todo-item'" v-for...> instead (it's works in your codepen)
<div id="app">
<h1>TODOs</h1>
<ul>
<li :is="'todo-item'" v-for="(todo,index) in todos" v-bind:todo="todo" :key="index"></li>
<li :key='"new_item"'>
<input placeholder="What needs to be done?" type="text" v-model="new_todo" >
<button v-on:click="add_todo()">Add</button>
</li>
</ul>
<p>You have finished {{ done }}/{{ total }}</p>
</div>
https://v2.vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
Related
I've searched for a while and did find a lot about multiple iterations. The problem is that i don't see a plain solution for my problem.
I have a list of checkbox that is filled dinamically with ng-repeat. Due to layout purposes i need to create a new div inline-block whenever i reach 3 checkboxes. Like that:
CheckBoxList = {1,2,3,4,5}
<div class="form-group-content">
<div class="form-col-secondary">
<ul class="list-checkboxes">
<li>
<input type="checkbox"/>1
</li>
<li>
<input type="checkbox"/>2
</li>
<li>
<input type="checkbox"/>3
</li>
</ul>
</div>
<div class="form-col-secondary">
<ul class="list-checkboxes">
<li>
<input type="checkbox"/>4
</li>
<li>
<input type="checkbox"/>5
</li>
</ul>
</div>
</div>
I tried using a iterator and two ng-repeat but didn't work like i wanted to.
If somebody already had this struggle and could help i would appreciate it.
To achieve this you will have to make 2 updates.
2 ng-repeat
Change structure
HTML Code
<div class="form-group-content">
<div class="form-col-secondary" ng-repeat="block in blocks">
<ul class="list-checkboxes">
<li ng-repeat="checkbox in block">
<input type="checkbox{{$index + 1}}"/>
</li>
</ul>
</div>
</div>
JS Code
$scope.blocks = [
['1','2','3'],
['4','5']
];
Here is a plunker for you - http://plnkr.co/edit/BWcFI5d02yPkAYDiQxvO?p=preview
If you split your CheckBoxList in parts of 3, you can use your ng-repeat on each div.
So change checkboxlist to something like:
divs = [[1,2,3],[4,5,6]];
then your html:
<div class="form-col-secondary" ng-repeat="div in divs">
<ul class="list-checkboxes">
<li ng-repeat="checkbox in div">
<input type="checkbox" ng-attr-id="{{checkbox}}">
</li>
</ul>
</div>
This might nog exactly match what you want as result, but it reflects the principle on which you should be able to create your own working version :-)
Edit
Worth noting: As far as I am aware, you can't have <input type="checkbox1" />, I think you mean <input type="checkbox" id="1" name="checkbox1" /> instead.
You'll have to track by $index in your ng-repeat and either ng-if or ng-show and $index < 3 for your first set and $index > 2 for the second set.
I have a list of user-details stored in userList.
I am rendering these list of users in a div tag as follows:
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
Now Problem occurs If same userList is used to render users in multiple div tags.
i.e.
<div class="1">
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
</div>
<div class="2">
<ul>
<li class="extra-users" ng-repeat="member in view.userList">
<input class="add-friends-check add-friends{{$index}}" type="checkbox" ng-checked="member.ischeck" />
</li>
</ul>
</div>
Now If two users are selected/checked in div1, it gets reflected in div2 as well since view.userList is getting updated.
One way to solve it is clone userList and assign cloned userList` to div1 and userList`` to div2.
But that is causing me performance issues If I load more than 15 or 20 divs.
Is there any way we can avoid selecting a user in one div not reflecting in another?
Thanks in Advance
I'm using angular recursive templates to generate a tree structure. I want to use x-editable for single leaf renaming. But the whole tree gets to "edit state" instead.
Check the fiddle: http://jsfiddle.net/7bLhvjd5/
<ul>
<li ng-repeat="data in tree" ng-include="'tree_category_renderer.html'" />
</ul>
< script type="text/ng-template" id="tree_category_renderer.html">
< div>
<span class="name" editable-text="data.name" e-form="textBtnForm">{{data.name}}</span>
<button ng-hide="textBtnForm.$visible" ng-click="textBtnForm.$show()">edit</button>
</div>
<ul>
<li ng-repeat="data in data.children" ng-include="'tree_category_renderer.html'" />
</ul>
</script>
Any ideas how to fix this?
I am trying to get sortable to work.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
</li>
</ul>
I can't seem to grab and drag anything. The important part of this question is the 3 div's in the li
I admit, I don't understand what this line in the docs means: "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)."
And I am able to get it to work with a table.
Any insights?
Yes, the docs do say "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)." which makes it hard to have 3 divs in the li. However, there is a solution.
You can use tg-dynamic-directive (at https://github.com/thgreasi/tg-dynamic-directive) to solve this. Don't forget to include it, and put 'tg.dynamicDirective' in your dependencies. Basically you take out the middle part in between the li tags, in this case the 3 divs, and you put it in another file and link to it.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
</li>
</ul>
Then in another file put the innards, like innards.html:
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
And replace the innards with:
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<tg-dynamic-directive ng-model="c" tg-dynamic-directive-view="getView">
</tg-dynamic-directive>
</li>
</ul>
And in your controller put something like:
$scope.getView = function(item) {
if item {
return 'innards.html';
return null;
};
Anyways the docs go over it pretty well. I realize this question is pretty old but I just ran into this myself and got it working so hopefully it helps someone else.
I would like to do this really basic example :
<div ng-controller="ctrl">
<li ng-repeat="config in configs">
<span >Config : {{config}}</span>
<li ng-repeat="version in versions">
{{config}}
</li>
</li>
</div>
So basically, I got 2 imbricated ng-repeat loop, and I would like to access a value of the first loop from the second one.
I thought it was really basic, but no way to make it work. My result of that is 1 liwith the config printed, and 3 empty sub lis
I already tried a lot of combination list {{$parent.index}}, {{$parent.config}} etc ...
I'm pretty sure this has to do with the structure of your HTML.
Here is a working plunker.
Since you are omitting the <ul> tags that are required for lists. The nested <li> is causing a display issue.
I have simple wrapped the <li> with <ul> and it seems to work fine:
<div ng-controller="ctrl">
<ul>
<li ng-repeat="config in configs">
<span >Config : {{ config }}</span>
<ul>
<li ng-repeat="version in versions">
VersionConfig: {{ config }}
</li>
</ul>
</li>
</ul>
</div>