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".
Related
I create a list of radio button selections, but the problem is that when clicked, they both remain selected, thus not working as a radio button group at all.
I have the same ng-model (a string; 'model') and ng-change for all of them, but the id is different.
<div class="radio-button"
ng-show="vm.forAdmins"
ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)" >
{{role.name}}
</div>
Been wrestling with this for a while now, can't see what I've missed.
Radio button will work as a group if you assign name property to those radio buttons. I was also facing this issue then I realized my mistake.
<div class="radio-button" ng-show="vm.forAdmins" ng-repeat="role in vm.adminRoleDefinitions">
<input id="{{role.name}}" type="radio"
ng-model="role.model"
ng-change="vm.stateChanged(role.name, role.active)"
name="roles" >
{{role.name}}
</div>
Try assigning a name attribute to your radio button. name groups the radio button. For example :
<input type="radio" name="someRadio" id="radioOne" />
<input type="radio" name="someRadio" id="radioTwo" />
Now only one is selected at a time.
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
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 use ng-repeat as i populate the names
this is my view
<div ng-controller="user_tagging_ctl" ng-init="user_type='<?php if(isset($user_type))echo $user_type; else echo'all'; ?>';">
<input type="text" class="form-control" ng-model="user_srch" maxlength="35" placeholder="Project Manager" required>
<span class="user_tagging_container">
<ul>
<li ng-repeat="x in data | filter:user_srch | orderBy:['status','x.user_lname']" data-id="{{x.user_id}}">
<input type="checkbox" name="pm-group">
{{x.user_fname + ' ' + x.user_lname}}
</li>
</ul>
</span>
</div>
everytime i search using my textbox the checkbox button resets to false.
example: i check the name i want then try to search another name then if i clear the textbox, all checkbox are now false/not checked.
how can i preserved the checked ones and make them at the orders first those are checked?
Bind to ng-model:
<input type="checkbox" name="pm-group" ng-model="x.selected">
See how to order
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'"