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>
Related
Following is the code I am using to populate the checkbox list.
<label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item .id">
<input type="checkbox" name ="item " ng-value="item .id" ng-model ="vm.selecteditem" />{{item.name}}
</label>
The above code selects all the items in ItemList. I need to select only one item from itemList. How do I do that?
https://vitalets.github.io/checklist-model/
This link worked for me!
1) set checklist-model instead of ng-model
2) set checklist-value instead of ng-value
You're attaching the same externalized variable vm.selectedItem to every checkbox. Because of this, when you check one it changes that variable to true in turn selecting all of the checkboxes because they are bound to the same variable which is now true.
My advice to you would be to attach a selected property to each item in ItemList. Then have that attached to the ng-model as shown below.
<label class="checkbox-inline" ng-repeat="item in vm.ItemList track by item .id">
<input type="checkbox" name ="item " ng-value="item .id" ng-model= "item.selected" />{{item.name}}
</label>
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 :)
When I click on one checkbox, I am expecting only that checkbox to be marked. For some reason, however, when I click on one checkbox, they are all getting marked.
<label ng-repeat="group in groups" id="mast" class="list-group-item">
<input type="checkbox" checklist-model="selectedGroups.group" checklist-value="value" checklist-change="change()">
Group {{$index + 1}}
</label>
It's probably because of checklist-value="value". The value property is the same for each instance of the ng-repeat.
Try to replace by checklist-value="group.value".
I'm using angular with ng-repeat like that:
<tr ng-repeat="(fieldName, fieldValue) in publication">
<td>
<input type="text" ng-value="publication[fieldName]">
</td>
</tr>
But binding doesn't work - so after change I have still old values in publication[fieldName]. How can I achieve binding?
It should be ng-model instead of ng-value if you want a data binding.
I am generating some radio buttons using ng-repeat, here is the code
<input type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" />
its generating 2 radio buttons, I want to show a section only if the radio button of value "sftp" is selected, how can I do that?
<div ng-show="????">
this section is visible when radio button having value sftp is selected
</div>
Give a model to both radios:
<input ng-model="myRadio" type="radio" ng-repeat="i in items" name="myRadio{{$index}}" value="{{i.val}}" />
And just do:
ng-show="myRadio == 'sftp'"