I am trying to create a dynamic form with multiple radio button options and get selected values..
<form name="myForm" ng-submit="sendAnswers(question)">
<ul>
<li ng-repeat="question in questionForm.questions">
<p>{{question.description}}</p>
<ul>
<li ng-repeat="option in question.options">
<input type="radio" ng-model="question.answer" value="option.value">
{{option.value}}
</li>
</ul>
</li>
</ul>
<p><input type="submit" value="sendAnswers"></p>
</form>
Problem is as I click on button, both options get selected..what am I doing wrong here?
Live example: http://plnkr.co/edit/aStk4SCHzAW0AKQuH7JE?p=preview
Thanks in advance!
Add a "name" parameter:
<input name="{{question.description}}" type="radio" ng-model="question.answer" value="option.value">
Also, you need to change "value" to {{option.value}}
<input name="{{question.description}}" type="radio" ng-model="question.answer" value="{{option.value}}">
Working Example
Related
I want to validate an angular form input and give it a class if is not $valid, the problem is, it´s inside a ng-repeat looping an array of int, and the input name is based on the $index:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_$index.$valid}">
<input type="text" id="ax_{{$index}}" name="ax_{{$index}}" ng-model="item" required=""/>
</div>
</li>
Everything gets the $index in the output, but the ng-class:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_$index.$valid}">
<input type="text" id="ax_0" name="ax_0" ng-model="item" required=""/>
</div>
</li>
What I expected it to be:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form.ax_0.$valid}">
<input type="text" id="ax_0" name="ax_0" ng-model="item" required=""/>
</div>
</li>
I have searched and people have similar problems but none of them have been solved so far. Is there any angular-super-hero-master-plus-advanced who can help me with it :) ?
Because you are constructing the property/key on form dynamically, you do the same thing you would in normal Javascript: use square["bracket"] notation.
Change your markup to:
<li ng-repeat="item in selectedItem.data.ax_ch">
<div ng-class="{'has-error':!form['ax_' + $index].$valid}">
<input type="text" id="ax_{{$index}}" name="ax_{{$index}}" ng-model="item" required=""/>
</div>
</li>
I'm trying to display two ng-repeats showing the same array in two different formats: A simple list with checkboxes and the same list, with extended info and checkboxes.
The following example works fine in Angular.
<label ng-repeat="item in vm.items">
<input type="checkbox" ng-model="item.selected">
{{item.name}}
</label>
<div ng-repeat="item in vm.items">
<h1>{{item.name}}</h1>
<p>{{item.desc}}</p>
<input type="checkbox" ng-model="item.selected">
</div>
But if I use Material Design Lite, the checked state isn't updated, so when you click in one checkbox, the other one stills the same.
Real example:
<div ng-repeat="item in vm.items">
<div class="mdl-card__title" ng-style="{'background-image': 'url({{item.photo}})'}">
<h2 class="mdl-card__title-text">{{item.name}}</h2>
</div>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-{{$id}}">
<input type="checkbox" ng-model="item.selected" ng-change="vm.updateMDL()" class="mdl-checkbox__input" id="checkbox-{{$id}}">
<span class="mdl-checkbox__label">Select {{item.name}}</span>
</label>
</div>
And in the list:
<div ng-repeat="item in vm.items">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-list-{{$id}}">
<input type="checkbox" ng-model="item.selected" class="mdl-checkbox__input" id="checkbox-list-{{$id}}">
<span class="mdl-checkbox__label">{{item.name}}</span>
</label>
</div>
If I click one checkbox then the same one in the list, object's selected status gets toggled and the clicked checkbox doesn't change (since it didn't change to selected in the first place)
Anyone else facing this issue? Workarounds?
I have some list to display for user reputation census.
With sigle option radio button I use this code and work great when user answer and then when he return on the same question to check his previous answer.
<li ng-repeat="item in items">
<input name="myName" value="{{item.id}}" type="radio"
ng-selected="myModel==item.id" ng-model="myModel"/>{{item.text}}
</li>
But with multiple option I've to use check box and I don't know how write code to mantain checked previous answer. Now I use this code but it doesn't work:
<li ng-repeat="item in items">
<input name="myName" checklist-value="{{item.id}}" type="checkbox"
ng-checked="myModel==item.id" checklist-model="myModel"/>{{item.text}}
</li>
Any help, please?
UPDATE
Now i have a model array with multiple value inside (myModel). With following code i'm not able to check correct items.
<li ng-repeat="item in items">
<input name="myName" checklist-value="{{item.id}}" type="checkbox"
ng-checked="myModel[$index]==item.id" checklist-model="myModel"/>{{item.text}}
</li>
Where is my error?
Thanks
Try following snipet
<li ng-repeat="item in items">
<input name="myName" type="checkbox" ng-model="ngModel"
ng-checked="myModel===item.id" ng-true-value="{{item.id}}"/>{{item.text}}
</li>
<label ng-repeat="language in languages">
<input type="checkbox" data-checklist-model="profile.languageId" data-checklist-value="language.languageId">
{{language.Language}}
</label>
It is working
Step:
you need to download "checklist-model.js" file (link)
you need to inject "checklist-model" module in your app.
then your code will work.
Plunker
How can i make yes radio button to be checked on page load and show/hide the field-set accordingly. Currently on load radio button is checked but its not showing the fieldset.
Html
<form name="myform" class="form " novalidate >
<fieldset>
<span>Would you like a receipt sent to you?</span>
<ul class="vList">
<li>
<input type="radio" name="receiptConfirmation" id="receiptAffirm" ng-model="reciept" value="yes" ng-checked="true">
<label class="form__radioLabel" for="receiptAffirm:" >Yes</label>
</li>
<li>
<input type="radio" name="receiptConfirmation" id="receiptDeny" ng-model="reciept" value="no">
<label class="form__radioLabel" for="receiptDeny">No </label>
</li>
</ul>
</fieldset>
<fieldset class="fieldset" ng-show="reciept=='yes'">
<legend class="isVisuallyHidden">Email Receipt</legend>
<ul class="vList">
<li>
<label for="firstName" class="form__label">First Name</label>
<input id="Text4" class="form__input form__input--textfield" type="text" >
</li>
<li>
<label for="emailAddress" class="form__label">Email Address</label>
<input id="email1" class="form__input form__input--textfield" type="email">
</li>
</ul>
</fieldset>
</form>
Do not mix ng-checked with ng-model. Setting ng-checked will not update the model, it will just update the element's checked property. Instead set the ng-model reciept to the desired value.
Remove ng-checked from input:-
<input type="radio" name="receiptConfirmation" id="receiptAffirm"
ng-model="reciept" value="yes">
In your controller set the model:-
app.controller('MainCtrl', function($scope) {
$scope.reciept = "yes";
});
Demo
Just set $scope.reciept = 'yes'; in your controller?
You have spelt receipt wrong also.
I have a grouped nested object that I want to filter. The filter works only on the second group.
<input type="radio" ng-model="grouping" value="name" />Name
<input type="radio" ng-model="grouping" value="date" />Gender
<input type="radio" ng-model="grouping" value="jsonpath" />Hair
<input type="text" ng-model="searchInput" />
<div data-ng-repeat="(group, details) in group(reports, grouping) | filter:searchInput">
<h2>{{group}}</h2>
<ul>
<li data-ng-repeat="report in details | filter:searchInput">
{{ report.name }}
</li>
</ul>
</div>
Here is the fiddle: http://jsfiddle.net/Tropicalista/aF2aL/15/
[UPDATE]
I have an updated plunker, not sure if i'm on the right direction: http://plnkr.co/edit/MYkTJoAIXV2XEN6glrDQ?p=preview
What is the purpose to put the filter on the outer repeater? Just remove it.
<div data-ng-repeat="(group, details) in group(reports, grouping)">
Demo