I have nested ng-repeats which are conflicting with each other
<div ng-repeat="item in items">
<input ng-if="!item.choices" ng-model=data["item"+$index] type="text"/>
<div ng-repeat="choice in item.choices">
<input ng-model=data["item"+$parent.$index] type="radio" name={{item.name}}/>
</div>
</div>
The indexes inside of the second loop are conflicting with the first. For example, if there are 2 radio buttons, they conflict with the first and second input's, despite the fact that they should have different indexes. Changing the radio button value changes the first and second text field input values. What is the issue?
Related
I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.
Try $scope.availableBankAccounts.length>=1
Should work
You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"
I currently have this UI:
the problem is that when I click one radio button, any preselected button will become unselected. So that's telling me that there aren't different input groups - all of the <input> tags are probably in one big group.
This is probably a pretty vanilla problem, but I am simply not an HTML or Angular expert.
Here is the code for this, there is an outer loop and an inner loop using ng-repeat:
<form name="myQuestionsForm" ng-submit="submit()"> // outer form
<div class="panel panel-default" ng-repeat="q in questions | orderBy:[]">
<h1>{{q.prompt.value}}</h1>
<div class="panel-body">
<form id="aform"> // inner form
<div ng-repeat="c in q.children | orderBy:[]">
<div ng-if="c.kind == 'text'">
<label>
{{c.value}}
<textarea name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value"></textarea>
</label>
</div>
<div ng-if="c.kind == 'checkbox'">
<label>
{{c.value}}
<input type="checkbox" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
<div ng-if="c.kind == 'radio'">
<label>
{{c.value}}
<input type="radio" name="response" class="form-control" ng-value="c.value" ng-model="q.newResponse.value">
</label>
</div>
</div>
</form>
</div>
</div>
<div style="text-align: center;">
<button type="submit" class="btn btn--success btn">
<h5>Submit</h5>
</button>
</div>
</form>
Perhaps the reason this is happening is because I have nested forms? Maybe I need to get rid of the outer form?
Group radio buttons with the name attribute.
<input> type attribute
The type of control to display. The default type is text, if this attribute is not specified. Possible values are:
radio: A radio button. You must use the value attribute to define the value submitted by this item. Use the checked attribute to indicate whether this item is selected by default. Radio buttons that have the same value for the name attribute are in the same "radio button group". Only one radio button in a group can be selected at a time.
– MDN HTML Element Reference - <input>
See also:
AngularJS input[radio] Directive API Reference
AngularJS ng-value Directive API Reference
AngularJS ng-checked Directive API Reference
I have a page where I want to update a form with several radio buttons. I query an api, and use the returned array of objects to populate the current values for the radio buttons. The problem that I have is that only the last set of radio buttons actually shows the value. This is the code that I have (I am using [[ and ]] for the start and end symbols for angular):
<fieldset data-ng-repeat="s in sections">
<div class="form-group">
<div class="col-md-12">
<h2>[[ s.section.name ]]</h2>
</div>
</div>
<!-- Field Item -->
<div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
<div class="col-md-12 m-b-30">
<h4>[[ f.field.name ]]</h2>
<input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
<label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
<label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
<label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
<label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
</div>
</div>
[[ f.field_condition ]]
<hr>
</fieldset>
So basically, I have several sections, and each section has several fields. Each field has it's own radio button group (I am using the section and field ids to name the radio group). What I currently see is only the last field in each section actually shows the selected radio button. The other fields don't have any selection, even though the value for ng-model definitely does (I am showing the value of f.field_condition just to make sure there is a value).
For each field, I can see that the model is set. And if I select a value manually, I can see that the model changes, so it seems to me that the model is setup correctly. I just don't know why it won't initially show as selected for all rows but the last one.
I should also mention that if I save the form even with the missing radio button selections, the database is updated properly (it doesn't set the values to null, and if I manually change the selected value, it is updated in the db as well).
Does anyone have any ideas? Thanks!
EDIT
Here is a fiddle for this, although, it is working as expected in the fiddle. http://jsfiddle.net/dq8r196v/367/
I tried using the static data that I used in the fiddle, but I am still having the same problem. Does anyone know if this could be a CSS problem? The radio buttons are styled, and I didn't write the HTML or CSS.
UPDATE
I am still having this issue, so I built a new angular app and only used the code that is included in the fiddle that I have created. I am having the same problem with this new app, even though the same code works in the fiddle. I really don't understand what's happening here, but if anyone could shed some light, I would really appreciate it.
I have literally copied and pasted the code from my fiddle into a new angular app, and only the last group of radio buttons in each section is showing the value in the app.
Here is my complete code for the new angular app if someone else wants to try it out and see exactly what is happening: https://pastebin.com/qSR33yfM
I created the app on a single page for simplicity.
Here is the link to a pastebin with the exact json that I am using in my app: https://pastebin.com/utfVVQfT
I fixed the problem you're having by simply adding an array of objects ($scope.values) representing the different radio button options, and using an ng-repeat to create your radio buttons. See the following for the updated code: https://pastebin.com/s3hNzaXX
I know there are semantics around ng-repeat creating new $scopes, and imagine there is a conflict in scopes with your nested ng-repeats where it's binding to the radio buttons incorrectly and at a scope different than you want (the section level ng-repeat).
To confirm this suspicion, you could convert all of your interpolations in the code to use functions and console.log s and f at different points and confirm that field_condition is being set at a level you didn't intend.
Either way, it' best practice to create your radio buttons through data (and using ng-repeat), as is done with the $scope.values array, and a good side effect to doing this is not only can you update the different value options using data through AJAX or however you would like, but you won't have weird angular scoping issues as you're experiencing in your current code above.
I have an ng-repeat with a bunch of radio buttons inside:
<div class="panel panel-default" ng-repeat="offer in vm.offerList">
...
<td ng-show="offer.edit">
<div class="row">
<input type="radio" name="before" ng-model="offer.before" value="false">
<input type="radio" name="before" ng-model="offer.before" value="true">
</div>
</td>
...
</div>
The model offer.before has the correct value, however, when the row is shown, the radio button doesn't appear checked. Why is this happening? I need the radio button to show the selected value.
This is a fiddle example of my problem: http://jsfiddle.net/danielrvt/dpoLdgjq/
Because anything inside attribute value gets toString() like value true will be considered as 'true' & it will looks for 'true'(string) instead of true(boolean).
Better use ng-value instead of value attribute. It will treat true value as in true of type boolean only.
Additionally in your case you have to add name attribute to be unique for each radio button group each offer element radio will be considered as unique form element.
Markup
<div class="row">
{{offer.before}}
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="false">
<input type="radio" name="before{{$index}}" ng-model="offer.before" ng-value="true">
</div>
Forked Fiddle
I have the view below. What I want is to change the class of the div based on whether or not the radio button inside it is checked. What am I doing wrong? Note: I'm a newbie to AngularJS and this project is me trying to learn Angular..
<div class="col-use-select" ng-repeat="show in shows" ng-class="{show[name]:'test'}[tvshow.chosen]">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
You are applying ng-class to div of ng-repeat hence it is assigned to all div's. You need to create a child div, add ng-class to that div with your condition. it will toggle the class of only that child div
<div class="col-use-select" ng-repeat="show in shows">
<div ng-class="test:tvshow.chosen">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="tvshow.chosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
What I got from the question is that you want to change the class on a particular radio button selection. The html markup that you have shown is not a valid one when assigning a class on conditional basis in angular.
Please find one below which will change the css class of the div on selection of option and then choose another class on the basis of alternate selection
<div ng-app ng-controller="test">
<div class="col-use-select" ng-repeat="show in shows" ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}">
<input id="{{show.name}}" type="radio" name="checkbox" ng-model="$parent.tvshowChosen" ng-value="show.name">
<label for="{{show.name}}">{{show.name}}</label>
</div>
</div>
In this example the line:
ng-class="{test:tvshowChosen=='abc',test2:tvshowChosen=='def'}"
Signifies that if tvshowChosen value is abc then test class will be applied or in the second case test2 will be applied.
This line:
ng-model="$parent.tvshowChosen"
Over here $parent is used as ng-repeat creates its own isolated scope. So $parent will target the parent scope and not individual isolated scopes so that the selection can be a valid one.
Working Fiddle