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>
Related
Iam trying to get value of toggle but its not working when first unchecked toggle button hit after checked it works fine.
<ul class="list has-header">
<li class="item item-toggle" ng-repeat="ingr in ingredients|filter:searching">
{{ingr.INGREDIENTNAME}}
<label class="toggle toggle-energized" >
<input type="checkbox" ng-model="ingr.INGREDIENTSTATUS" ng-change='changeingrStatus(ingr.INGREDIENTCODE,ingr.INGREDIENTSTATUS)' ng-checked="{{ingr.INGREDIENTSTATUS==1?true:false}}">
<div class="track">
<div class="handle"></div>
</div>
</label>
</li>
</ul>
Controller.js
$scope.changeingrStatus = function(code, status) {
console.log(status);
}
You cannot use ng-model attribute along with ng-checked. I would suggest to use ng-model only.
Read ngChecked page for details:
Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.
I'm trying to put a radio button on each of my list elements as you can see here.
<ul class="list-group">
<li class="list-group-item" ng-repeat="player in vm.players">
{{player.name}}
<span class="pull-right">
<input type="radio" name="gender"value="player.name">
</span>
</li>
</ul>
I hope basically to show a list of player's name and you can select some with a radio button, but they don't seem to allow you to click them.
Thanks,
As #Dimodi suggests, if you want text to be associated with a clickable form input like a checkbox or radio button, you must associate them using a <label>. For example, either of:
<label><input...> some text</label>
<input id="foo"...> <label for="foo">some text</label>
Just bind label for attribute with radio's id.
Or
Simply placed radio inside particular label.
<ul class="list-group">
<li class="list-group-item" ng-repeat="player in vm.players">
<label> {{player.name}}
<input type="radio" name="gender"value="player.name">
</label>
<label for="plys"> {{player.name}} </label>
<input type="radio" id="plys" name="gender"value="player.name">
</li>
</ul>
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 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>