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>
Related
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
By default the ngModel for checkboxes is set to true and false on the checking and unchecking action.
I want the value to be set to different values and not true and false. I have tried using [ngValue] and [value] but nothing worked. How to do this?
The actual scenario is:
I have an array of categories which can be selected.
There is also an option to reset all the selections made.
My markup and code:
<template ngFor let-item [ngForOf]="categories" let-i="index">
<input id="{{item}}" type="checkbox" name="{{item}}" [(ngModel)]="categoriesSelected[i]" [ngValue]="item">
<label htmlFor="{{item}}">{{item}}</label>
</template>
What I was hoping to achieve from this was that in the categoriesSelected array the item names would populate and unpopulate as the checkbox is selected and unselected.
But this does not work as ngValue is not recognised.
I had to do the following:
<template ngFor let-item [ngForOf]="categories" let-i="index">
<input id="{{item}}" type="checkbox" name="{{item}}" [ngModel]="categoriesSelected[i]" (change)="checkChange(i, item, 'category')" >
<label htmlFor="{{item}}">{{item}}</label>
</template>
Where in the checkChange function, I set the item value to the ith index of the categoriesSelected array which I later output only to the ng-model.
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 have a checkbox and the value of this checkbox is fixed as 'A'. I want the checkbox selected if the model value matches with checkbox value attribute.
<div class="form-horizontal">
<label class="col-md-2">
<input type="checkbox" id="Animals" name="Animals" ng-model="ModelData.Animals" value="A" /> Animal(s)
</label>
</div>
But using the above code, checkbox selection is not working automatically. How can I achieve this?
Please, try to use: ng-checked="ModelData.Animals == 'A'"
More information about ng-checked:
http://docs.angularjs.org/api/ng.directive:ngChecked
You need to use the ng-checked directive to check it with an expression.
Here is a working example: fiddle
Using ng-repeat I display some radio's in the edit form:
<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
<input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>
As you can see, I've applied the 'dot practice'. The edit form is a pop-up over my detail form. In my detail form I have this:
<tr>
<td>Gender:</td>
<td>{{ customer.Gender.Description }} </td>
</tr>
All my bindings in the edit form are working, but I can't get the gender binding to work. I think it has something to do with scope inheriting by the use of ng-repeat.
I've also tried to use $parent, but the outcome remains the same:
<label style="float: left;margin-right: 3px;" data-ng-repeat="gender in genders" data-ng-hide="$first">
<input type="radio" name="gender" value="{{gender.Id}}" data-ng-model="$parent.customerFormData.customer.Gender.Id" />{{gender.Description}}
</label>
Setting the initial value works. When a female is set, the female radio is selected and when it is a male, the male radio is selected.
A second problem is (and I think it has to do with the binding), is that when Male is selected, I have to click twice on female to get female selected.
Edit: I've created a Fiddle to illustrate my issue.
One solution is to use ng-value(which evaluates its content as an expression) and set it to the whole gender object, and set ng-model to the Gender object on your FormData. This way, when you change the input, the gender object is set to FormData.Gender and you have access to both Id and Descr.
<label ng-repeat="gender in genders">
<input type="radio" name="gender" ng-value="gender" ng-model="customer.FormData.Gender">
{{gender.Descr}}
</label>
http://jsfiddle.net/ADukg/3194/
If you just want the Id in the model, you can use: (value evaluates its content as a string)
<label ng-repeat="gender in genders">
<input type="radio" name="gender" value="{{gender.Id}}" ng-model="customer.FormData.Gender.Id">
{{gender.Descr}}
</label>
And in the controller:
$scope.customer.FormData.Gender = {Id : $scope.genders[1].Id};
http://jsfiddle.net/ADukg/3195/
Strangely enough, it doesn't work when you set value and model to Id, but initially bind a whole gender object to the gender model. Weird!
I can't explain it 100% accurately. But you have too many nested objects in your scope!
Look at this example (fiddle: http://jsfiddle.net/ADukg/3193/)
<div ng-controller="MyCtrl">
<label ng-repeat="gender in genders">
<input type="radio" name="gender" value="{{ gender.Id }}" ng-model="$parent.selectedGenderId">{{gender.Descr}}
</label>
</div>
function MyCtrl($scope) {
$scope.genders = [{Id: 1, Descr:'Male'}, {Id:2, Descr:'Female'}];
$scope.selectedGenderId = $scope.genders[1].Id;
$scope.$watch('selectedGenderId', function(newValue, oldValue) {
console.log("selectedGenderId=" + newValue);
// TODO: set it into FormData?
});
}
If you set the "selectedGenderId" directly it will also be set correctly.
I think the selection problem has nothing to do with the binding directly but with the scope and nesting of scopes via the many objects.
Take also look at this explanation:
http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.html
The problem lies with the binding on the radio buttons. You are binding on the customer.FormData.Gender.id model - note it is the id property that you bind to and not the Gender property.
Thus, when you select the radio button for Male, only the ID on the gender is changed - not the Descr field. This explains clearly the behaviour. When you select different radio buttons, notice how only the ID gets updated and not the Desc.
To change the Descr field as well, you will be wise to have a dedicated model for the radio buttons and then respond to changes to this model.
This is demonstrated in this fiddle.