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
Related
I want to have false value when user checkbox is not checked.
HTML Code
On checking the checkbox value is setting as 'true' in addUser.isAllOrgSelected. But when checkbox is not checked value is not getting set to 'false'.
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox"
ng-true-value="true" ng-false-value="false" ng-
model="addUser.isAllOrgSelected">
<label for="checkbox-1-1"></label>
<span class="check-text">ALL</span>
you can use the ng-checked directive.
<input type="checkbox"
ng-model="addUser.isAllOrgSelected"
ng-true-value="true"
ng-false-value="false"
ng-checked="addUser.isAllOrgSelected " />
see example here
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>
https://jsfiddle.net/bngk/7urrobaa/
<div ng-repeat="item in items" ng-init="item.showCb = item.value == 'true' || item.value == 'false'">
<input type="checkbox" ng-if="item.showCb" ng-true-value="true" ng-false-value="false" ng-model="item.value" ng-checked="item.value == 'true'">{{items[$index].value}}</input>
<input type="text" ng-if="!item.showCb" ng-model="item.value"/>
</div>
I have problem in binding the checkboxes in ng-repeat if I have few checked values by default where the values are not properly updated in the model and if all are non-checked by default, it works but the value is updated in the model, it holds boolean value though i mentioned ng-true-value="true" and ng-false-value="false" as string. I want the string value to be present in the model. Please check in my fiddle. Thanks for your support.
If you have a look at the documentation: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D, you can see ng-*-value accepts an expression. So if you simply put ng-true-value="true", it sees that true as an expression.
If you put ng-true-value=" 'true' ", then it knows it is a string.
But as mentioned above, there are a couple of other mistakes in your code.
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