Combine checkbox and radio's with multiple angular models - angularjs

I'm building a configurator tool where people can configure their own kitchen and I need some help with the logics here.
Let's say people can select a sink:
When a checkbox is checked, a list appears with multiple sinks (radio buttons). By default, when the checkbox is checked, the first radio button should be checked as well.
I want several things to happen here:
1) When the checkbox is checked, the radio buttons should appear. The first radio button should be checked by default and the value of this json object should be stored in formData.sink.
2) The price of the selected sink should be saved in prices[x].price.
3) When the checkbox get unchecked, the value of prices[x].price should be set to 0 and the formData.sink object should be empty.
Here's my HTML. In my controller I don't have any functions yet.
<tr class="tr-border-top">
<td colspan="2"><input type="checkbox" ng-model="sink">Sink</td>
<td>{{ prices[5].price | currency:"€":0}},-</td>
</tr>
<tr ng-show="sink">
<td colspan="3">
<ul>
<li ng-repeat="node in nodes | filter:{type:'sink'}">
<label>
<input type="radio" name="sink" class="form-control" ng-model="formData.sink" ng-value="node" ng-init="$index==0?(formData.sink=node):''">
{{ node.title}}
</label>
</li>
</ul>
</td>
</tr>

Well, seems like you didn't try much yourself. I would go for adding ng-change and then call a function that sets the values as you want them
<input type="checkbox" ng-model="sink" data-ng-change="onSinkChanged(sink)">
$scope.onSinkChanged = function(sink) {
// your logic here
}
and in that function you can set the correct values and if its unchecked, reset the values to 0 or undefined. Try some of that yourself and if you get stuck specify your exact problem :)

Related

Values are duplicated into all input field which is created using the ng-repeat and ng-model

I am using the ng-repeat to create the input fields dynamically, everything seems to be working fine and the input fields are created but due to some reason when I enter some value into that created input field then due to two-way data binding the value is entered simultaneously in all the text fields that were created.
As per my knowledge, I am assigning the different ng-model to each of the created fields so I am not sure why the values are being copied. When I try to print the values which are assigned to the input field just above the field then I see the id is different wanted to know why all the fields are taking the same value and also how can I prevent it.
HTML Code:
<tr>
<td ng-repeat="extension in ExtensionList">
<!-- Here the value displayed are different -->
{{ formdata.extension.ExtensionVlaues }}
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="formdata.extension.ExtensionVlaues">
</td>
</tr>
Here is the screenshot from the front-end:
Here is the example of my ExtensionList: {"Field1":"","Field2":"","Field3":1,"ExtensionVlaues":2}
As per my knowledge, the given ng-model is different but still not working. Can anyone please help me with this? I tried few things like ng-model="formdata.extension[ExtensionVlaues]" but still no luck.
I tried to assign ng-model like this but it is not working:
ng-model="formdata.extension[ExtensionVlaues]"
Based on the below answer I tried 2 different things it but it's not working and getting the same issue. Please let me know how can I resolve this:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.key">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.ExtensionVlaues">
</td>
You are trying to use ExtensionList as an array. You need to use it as an object with ng-repeat:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][key]">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][ExtensionVlaues]">
</td>
Just incase anyone else also struck at this issue:
<span ng-repeat="(key, extension) in ExtensionList" class="form-inline">
<br/>
<span>
{{ extension.NameSpace + ":" + extension.LocalName }}
</span> 
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="ExtensionList.extension[key].FreeText" ng-blur="ExtensionText(ExtensionList.extension[key].FreeText, extension.ExtensionVlaues)">
</span>

event.target.checked property is not working for checkbox

I have some input checkbox which is created inside ng-repeat
<li ng-repeat="item in tasks track by $index">
<input type="checkbox" ng-init="setChecked(item.status)"
ng-checked="changeStatus(item.id)"
ng-model="item.status" value="{{item.id}}">
<span ng-model="item.title" ng-keyup="completeEdit(item.id)"
contenteditable="false" ng-dblclick="contentEdit()"
class="done-{{item.status}}">{{ item.title }}
</span>
</li>
What I am trying to achieve is, based on a data item property the checkbox should show either checked or unchecked. For that I am using ng-init of the checkbox. Below is the function I am calling in ng-init
$scope.setChecked = function(status) {
event.target.checked = status;
};
But the problem is the above function is not making change to checkbox. The checkbox is always showing unchecked even if the status is true
Can anyone tell me what I am doing wrong in the above code?
Any help is appreciated :)
To make the checkbox checked or unchecked I should have used ng-checked and for update the status I used ng-change. This fixed the problem for me.
<input type="checkbox" ng-change="changeStatus(item.id)"
ng-checked="item.status" ng-model="item.status"
value="{{item.id}}">

Multiple sets of radio button with ng-model and ng-repeat

I'm very new to Angular and I have some issues with setting the default option on my radio buttons. I have already checked the other answers and using $parent does not solve my issue or I'm using it wrong.
I have a group of radio button which contains 2 input:
input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_a}}" > #{{ field.field_data.value_a }} <br>
input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_b }}"> #{{ field.field_data.value_b }}
If the page displays only 1 group(pair) of radio button, it correctly sets the default value for the radio button group. The issue here is, when there are 3 groups (3 pairs) of radio button generated by ng-repeat, it only sets the value of the last group of radio buttons and the other 2 groups are left unchecked or blank.
Is this because the radio buttons are generated using 2 ng-repeats? To help, here is my code.
I have an array $scope.filtered_forms which is set by:
$scope.filtered_forms[index] = {
form_id:id,
fields:[{
field_data: {field.label,
field_suggested:string,
value_a:string,
value_b:string},
field_type: radio
},{
field_data: {field.label,
field_suggested:string,
value_a:string,
value_b:string},
field_type radio
},{
...same input as above each object represents a group of radio
}]
}
Basically, $scope.filtered_forms contains form objects. In my html file, I have this:
<div ng-repeat="form in filtered_forms" id="#{{ form.form_id }}">
<table class="table" id="borderless">
<tr ng-repeat="field in form.fields">
<th scope="row" width="35%">#{{ field.field_data.label }}</th>
<td>
<div ng-if="field.field_type == 'radio'" style="margin-bottom: 10px">
<input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_a}}" > #{{ field.field_data.value_a }} <br>
<input type="radio" name="#{{ form.form_id }}_#{{ $index }}" ng-model="$parent.field.field_data.suggested" value="#{{ field.field_data.value_b }}"> #{{ field.field_data.value_b }}
</div>
</td>
</tr>
/table>
This right here produces 2 groups/pairs of radio buttons but only the last group gets a default value. Even when using ng-checked and even without $parent.
Additional info, field_suggested has the same value as value_a or value_b. You can see that the radio button is under 2 ng-repeats. I'm using laravel blade and this html file is inside a modal. I removed some of the html data and property inside the form which does not relate to the issue.
Any help is appreciated.
Thanks!
You seem to have mixing many things. I copied your code created a plunker and found that the name for the radio group is not actually form_id_{{$index}} but it has whole object as string. I have changed the code hope it helps you.
See the code here
The issue is with your group names why are you using # in the names. Please remove them it should work fine. Also please see that there are no special characters in the value for name attribute.
name="{{ form.form_id }}_{{ $index }}"

radio button will not bind properly Angular

I have the following view
<tr ng-repeat="item in items">
<td>
<input type="radio" name="{{item.GroupName}}" data-ng-value=" {{item.BooleanValue}}" />
{{bookmark.BooleanValue}}
</td>
The above shows the text value of bookmark.BooleanValue after the radio button as true but the radio button is not selected.
I don need any complex binding to the viewmodel. The requirement is to make a DB call on selection (which I will get to once I can get the binding sorted
Any help?
You use ng-value in conjunction with ng-model. ng-model specifies the property the radio button is bound to and ng-value is the value given to the bound property when that radio button is selected. See the docs.
<tr ng-repeat="item in items">
<td>
<input type="radio" name="{{item.GroupName}}" ng-model="item.BooleanValue" ng-value="true"/>
{{item.BooleanValue}}
</td>

Angular radio button validation with an ng- repeat

I'm running into an interesting Angular validation issue. I need to make sure that radio buttons are selected (they might not have a default value when loaded). The values for the radio buttons are iterated over from an array using ng-repeat. This whole thing also happens inside another ng-repeat for a list of users.
The issue is that I have to set a unique/dynamic name attribute on each group of related radio buttons, otherwise selecting one will unselect others in a different row. The validation in based on the name attribute and I cannot seem to find a way to use this unique/dynamic name in the needed ng-class and ng-show expressions.
This is waht is not working:
ng-show="userFormRow.service-{{$index}}.$invalid"
Here's a sample of the code in context:
<table class='table table-striped table-bordered'>
<tbody>
<tr ng-repeat="u in users"
ng-form="userFormRow">
<td>
<!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
<div class="form-group"
ng-class="{'has-error': userFormRow.service-{{$index}}.$invalid }">
<label class="control-label center-block">Service</label>
<div class="radio-inline" ng-repeat="o in serviceOptions">
<label>
<!-- HERE is where I define the unique name attribute based on the index of the table repeater -->
<input type="radio"
name="service-{{$parent.$index}}"
value="{{::o}}"
ng-model="u.Service"
ng-required="!u.Service"> {{::o}}
</label>
</div>
<!-- THIS is having an issue determining the name of this form item since I need to generate a dynamic one here-->
<p class="help-block" ng-show="userFormRow.service-{{$index}}.$invalid">A service must be selected!</p>
</div>
</td>
</tr>
</tbody>
</table>
And here is a full code example.http://codepen.io/chrismbarr/pen/eNoGLJ?editors=101 Check the console for errors
You should use bracket notation to access variable object property:
ng-show="userFormRow['service-' + $index].$invalid"
and same with ngClass:
ng-class="{'has-error': userFormRow['service-' + $index].$invalid }"
Demo: http://codepen.io/anon/pen/rVbYpG?editors=100

Resources