I Have several categories (behavior ...) and one category has several criteria (communication ...) :
{
"behavior": [ "communication", "autonomy", "creativity" ],
...
}
I want to create one radios group for each criterion.
So i use two nested loops (ng-repeat) to create all radio button.
<input type="radio" name="{{key}}_{{item}}" value="0" data-ng-model="record[key][item]" /> good
See jsfiddle.
I try to initialized all radio button but without success.
My three buttons should be checked, but are not.
Is it the same problem than :
Arrays of strings not being handled properly within ng-repeat
I don't understand ...
Here is solution, you can not have a single form in two ng-repeat you need to use two different form for two ng-repeat, one would be innerForm and the other one would be outerForm, & then there would n number of innerForm inside outerForm.
HTML
<div ng-controller="MyCtrl">
<div data-ng-repeat="(key, array) in list">{{ key }} :
<ng-form name="outerForm">
<div data-ng-repeat="item in array">{{ item }} :
<ng-form name="innerForm">
<input type="radio" name="radioInput" value="0"
data-ng-model="record[$parent.key][item]" />good
<input type="radio" name="radioInput" value="1"
data-ng-model="record[$parent.key][item]" />bad
</ng-form>
</div>
</ng-form>
</div>
<hr/>all : {{ record | json }}
</div>
Working Fiddle
Related
I want to create a a 3 radio button groups each having its own unique model using one ng-repeat. How can I achieve this?
<div class="radio" data-ng-repeat="item in selItem.items" >
<label class="control-label">
<input type="radio"
data-ng-value={{item.vm}}
data-ng-model="????"
name="{{selItem.Title}}"/>{{item.dm}}
</label>
</div>
First and foremost, why would you do that? Radio buttons are for a unique selection among a group of options, so having the same model for all radio buttons is the way to go.
However, for setting unique ng-models for each item iteration inside ng-repeat, you have to use object bracket notation, using $index or a property of each iteration itself to name the property of the object model.
<div ng-repeat="item in items">
<input type="text" ng-model="myModel[item.name]" >
</div>
check this fiddle to see it working
In my angular app I'm using ng-repeat to generate several radio buttons, the ultimate goal is to add a choiceSelected class (ngClass colour styling) to the label of the clicked radio input. I can add the style to the clicked button, BUT that style is added to every other clicked radio button and I end up with 5 coloured labels. Can't understand why.
Here is the HTML code:
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio" name="optradio" ng-model="isChecked" ng-value="$index" ng-click="selectAnswer($index,questionObject)">{{obj.body}}</label>
</div>
</div>
<div class="row" ng-repeat="obj in questionObject.choices">
<div class="radio">
<label class="choice" ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
/*********************************************/
ng-model="isChecked"
ng-value="$index"
/*********************************************/
ng-click="selectAnswer($index,questionObject)">{{obj.body}}
</label>
</div>
</div>
Look at the lines inside the comments, clearly tells that your value of the checkbox($index) is binding to the isChecked variable.
By your, condition in ng-class isChecked==$index it is same for all the elements and so the class is applied for all radio buttons.
if you can update the Json of questionObject , can give you alternative option.
Assuming that questionObject contains the following json
[{
"body": "abc"
}, {
"body": "def"
}, {
"body": "aghi"
} ]
You can use the below code to make your result achieve
<div class="row" ng-repeat="obj in questionObject track by $index" >
<div class="radio" >
<label class="choice"
ng-class="{'choiceSelected': isChecked==$index}">
<input type="radio"
name="optradio"
ng-value="obj.body"
ng-click="selectAnswer($index,obj)">
{{obj.body}}
</label>
</div>
The method selectAnswer should make your work simple. Use this
$scope.selectAnswer=function(number,obj)
{
$scope.isChecked=number;
}
LIVE DEMO
NOTE: In your code the selectAnswer method call in HTML passes the
questionObject fully
Update 1
Reason for manually defining isChecked
Angular looks for the the value of isChecked in the scope because you have used ng-class in the
How to access from frmParent to a certain frmChild? (without the need to add things like: frmChild {{$index}}).
<div ng-form="frmParent">
How to know frmChild (i.e at index 3) $pristine value from HERE
<div ng-form="frmChild" ng-repeat="item in mct.listOfElements">
{{item.Name}}:
<input type="text" ng-model="item.Value" /> Pristine: {{frmChild.$pristine}}
</div>
</div>
Here is a working example to play with what i'm talking about.
You can use unique names for your child forms, ex. item.Name if it's supposed to be unique:
<div ng-repeat="item in mct.listOfElements" ng-form="{{item.Name}}">
{{item.Name}}:
<input type="text" ng-model="item.Value" /> Pristine: {{frmParent[item.Name].$pristine}}
</div>
And then refer to any required child form by it's name:
D now is pristine: {{frmParent.D.$pristine}}
Please see the Plunker.
I'm trying to get multiple values selected form a checkbox list generated using ng-repeat in anguler
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model.ID" ng-true-value="'{{item.ID}}'" ng-false-value="''"/>{{item.Name}}
</div>
But what I want is to have different ng-models for different check boxes. How can I do that. Is there a way to do what ng-repeat does with out using ng-repeat
In Angular one checkbox is linked with one model, but in practice we usually want one model to store array of checked values from several checkboxes.
Checklist-model solves that task without additional code in controller. examples
use $index as key
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model[$index].ID"/>{{item.Name}}
</div>
or use item unique id:
<div ng-repeat="item in items">
<input type="checkbox" ng-model="model[item.ID]"/>{{item.Name}}
</div>
How do I get the proper radio button to be checked according to the value of fc.confidence when the template is first loaded?
The code below selects neither radio even though the value of fc.confidence is None
div.container-fixture(ng-repeat="fc in fixtureConfidences")
div.item-confidence
div {{ fc.gsm_id }}
div
label None
input(type="radio" name="confidence_radiogroup" value="None" ng-model="fc.confidence")
label Low
input(type="radio" name="confidence_radiogroup" value="Low" ng-model="fc.confidence")
Part of your problem is that you are sharing the radio group name across all the items in your repeat. When you omit the name, AngularJS will group them by scope and give it a name dynamically.
Here is how it would look (in HTML):
<div class="container-fixture" ng-repeat="fc in fixtureConfidences">
<div class="item-confidence">
<div>
{{ fc.gsm_id }}
</div>
<div>
<label>None
<input type="radio" value="None" ng-model="fc.confidence" />
</label>
<label>Low
<input type="radio" value="Low" ng-model="fc.confidence" />
</label>
</div>
</div>
</div>
<pre>{{fixtureConfidences | json}}</pre>
Here is a working plunker: http://plnkr.co/edit/nc2Xx2hvCE7iOnlC4i5R