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
Related
<input className="form-control"
type="text"
/>
<input type="button" onClick={()=>clickHandle()}/>
When I click the button, I want to change the check property of the checkbox. But the checked property or defaultChecked properties do not work in this regard. What can I do about it?
As far as I understand, you want the status of the checkbox to change when the button is clicked.
If I understood correctly, this is probably what you wanted.
export default function App() {
const [chkValue, setChkValue] = useState(false);
return (
<div className="App">
<input className="form-control" type="checkbox" checked={chkValue}/>
<input type="button" value="click" onClick={()=>setChkValue(!chkValue)} />
</div>
);
}
You have a type text input and a type button input. There is no checkbox there. You'd need a type checkbox input and then try this answer How to set default Checked in checkbox ReactJS?
Edit:
Wrong link for setting checked value. The link explains how to set the default. This code snippet has an example of setting a checkbox value dynamically.
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}}">
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>
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.
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