We Keep Coding

Setting ng-model inside ng-repeat not working

I have a list of questions and each question have some options with checkbox. I'm using an ng-repeat to list the questions and another ng-repeat to list the options. So how should I set the ng-model for the answer option checkbox to get all the selected options for all questions.
I tried setting ng-model like this answers[qst.id][ans.id], But its returning error TypeError: Cannot set property '*' of undefined
<div ng-repeat="qst in questions">
<div>{{qst.question}}</div>
<div>
<ul>
<li ng-repeat="ans in answers">
<span>
<input type="checkbox" ng-model="answers[qst.id][ans.id]">
</span>
<span>
{{ans.ansOption}}
</span>
</li>
</ul>
</div>
</div>
What is the perfect way to do that ?

Dont know your structure of Answers, but it is probably object (key-value pair), so i binded your checkbox to key checked in answer.
<div ng-repeat="qst in questions">
<div>{{qst.question}}</div>
<div>
<ul>
<li ng-repeat="ans in answers[qst.id]"><span><input type="checkbox" ng-model="ans.checked"></span><span>{{ans.ansOption}}</span></li>
</ul>
</div>
</div>

AngularJS ng-checked rendering issue

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

x-editable in recursive template

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?

Access parent index in nested ng-repeat

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>

How to get content between div

I have one ul li list and I want to put that content between ..
What I have
<div id='a'>
<ul>
<li>
<li>
<li>
</ul>
</div>
what I want to do is that using jquery I want to add div before and after this content like this
What I want
<div id='a'>
<div id='b'>
<ul>
<li>
<li>
<li>
</ul>
</div>
</div>
What I am using is append or before but not getting properly result.
I used following code.
$("#a").prepend("<div id='b'>");
$("#a").append("</div>");
But I got result like this.
<div id='a'>
<div id='b'></div>
<ul>
<li>
<li>
<li>
</ul>
</div>
please help me.

You can use .wrap() to do this:
$("ul").wrap("<div id='b'></div>");
Demo Fiddle

Use wrap()
This will exactly do what you want:
$("#a > ul").wrap("<div id='b'></div>");
Look at the doc: http://api.jquery.com/wrap/

Try this
$("ul").wrap("<div id='b'></div>"); and here is the working example