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.
Related
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>
How can I put condition on checked property of checkbox?
I have checkboxes for each row in my application. In my database, I have a column 'IsSaved' whose value is either 0 or 1. If IsSaved for a row is 1 then checkbox should automatically be shown as selected.
Here's my code snippet:
<td style="text-align:center;">
<input type="checkbox" name="select" value="${ID}" ng-checked="${IsSaved} ? true : false" />
</td>
How can I achieve this?
You can access variables of your scope directly by calling it by its variable name: IsSaved.
You are using a ternary expression, this however is not supported as described here.
Now you can use a shorter expression for this: IsSaved == 1, which just results in a truthy or falsy result.
So you get
<input type="checkbox" name="select" id="{{ID}}" ng-checked="IsSaved == 1" />
Note: that ID variable can be accessed in the scope by the double braces.
JsFiddle
<input type="checkbox" name="select" value="ID" ng-checked="(IsSaved) ? true : false" />
I'm assuming that IsSaved is a $scope variable in your controller that has scope over your HTML template
This should work
Hi Siddharath Please try the bellow. This this work for me.
<td style="text-align:center;">
<input type="checkbox" name="select" value="{{ID}}" ng-checked="{{IsSaved}}" />
</td>
I have a checkbox that needs to be shown as selected depending on a function result instead of binding it to an object property.
This would be easy, but is not possible:
<input type="checkbox" ([ngModel])="category.selected">
And this does not work, as even checked="false" results in a checkbox being displshownayed as selected:
<input type="checkbox" [attr.checked]="isCategorySelected(category.id)"/>
I need an outcome like this
<input type="checkbox">
<input type="checkbox" checked>
depending on the result isCategorySelected(id).
Any help is appreciated.
You cannot use [(ngModel)] in this scenario because it defines a 2-way databind, and you are passing a function.
Instead, you could simple use [ngModel], like the snippet below. This syntax defines a one-way databind.
<input type="checkbox" [ngModel]="yourBooleanFunction()"/>
You can read more about ngModel here.
Let me know if you have any other problem with it.
I am using ng-repeat in angularjs to display several checkboxes.
<div class="checkbox" ng-repeat="subject in priceinformation.subjects">
<label>
<input type="checkbox" ng-model="priceinformation.subscriptioninfo.subject.name"> {{subject.name}}
</label>
</div>
The problem is all the checkboxes are using the same model, hence if I check one, all are checked. I want to do it in a way that the model can resolve to different values. e.g.
ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}"
{{subject.name}} should resolve to something like English, History etc, hence a different model for each checkbox.
But ng-model="priceinformation.subscriptioninfo.subject.{{subject.name}}" is giving an error.
Note: {{subject.name}} is resolving correctly used elsewhere, and 'priceinformation.subscriptioninfo.subject' is working correctly.
Use [] instead of .
ng-model="priceinformation.subscriptioninfo[subject.name]"
Plnkr Demo
Script
$scope.priceinformation ={};
$scope.priceinformation.subjects = [{"name":"English"},{"name":"History"},{"name":"Maths"}];
$scope.priceinformation.subscriptioninfo ={};
<div ng-repeat="item in checks">
<input type="checkbox" ng-model="item.checked">{{item.name}}
</div>
See Plunkr
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