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.
Related
I have an array object and i want filter that array by multiple properties and get filtered array object length in my html angular binding for checkbox check/uncheck condition as below:
myArray=[
{"ID":1,"StatusID":0},
{"ID":2,"StatusID":1},
{"ID":3,"StatusID":0}];
<input type="checkbox" ng-checked="myArray|filter:{ID:2}).length==1" />
my expected result like
if (myArray.ID=2 && myArray.StatusID=1).length==1
then checkbox is checked
else unchecked
<input type="checkbox" ng-checked="(myArray|filter:{ID:2,StatusID:1}).length==1" />
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 have to develop a configuration screen where I have to fetch a set of key pair values from db and show in the UI to update the configuration. Here, when the value is 'TRUE' or 'FALSE', I have to show the input control as checkbox and for the rest of the values, I have to show the input control as textbox. I have used ng-repeat for single input control. But here I need to show two input controls (checkbox / textbox) based on the value. Can you please give me an idea on how to use ng-repeat to implement with multiple input controls ?
How about something like this:
<div ng-repeat="item in items"
ng-init="item.showCb = item.value == 'TRUE' || item.value == 'FALSE'">
<input type="checkbox"
ng-if="item.showCb" />
<input type="text"
ng-if="!item.showCb" />
</div>
JSFIDDLE
I have a checkbox code :
<div data-ng-repeat="data in displayCollection | unique:'statut_ticket_id_statut'">
<input type="checkbox" ng-model="data.libelle" ng-checked="data.libelle === 'Opened'" /> {{data.libelle}} </div>
It display some checkboxes and if i check them it update the table below with the checkbox filters.
I've set the checkbox "Opened" checked by default.
It works, the checkbox is checked but the table below is not updated.
I have to uncheck that default checkbox and check it again to make it works.
Any solutions?
Use ng-true-value to tell AngularJS which value should be assigned to data.libelle when the box is checked.
<input type="checkbox" ng-model="data.libelle" ng-true-value="'Opened'" ng-false-value="'closed'" />
https://code.angularjs.org/1.4.9/docs/api/ng/input/input%5Bcheckbox%5D
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