Menu
I've browsed similar questions for a couple hours, but haven't come up with anything that's an exact match. What I want to do is have a checkbox be automatically checked via data binding to a true/false value in my data. I can get the item names to load no problem, and I can even pull the checkbox values later on for saving to the server, but I can't get the initial values to load properly.
Here's a reduced example that shows the fundamental problem; HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="shoppingListNg.js"></script>
<body ng-app>
<div ng-controller="ShoppingListCtrl">
<table>
<tr ng-repeat="item in shoppingList">
<td>
<div>{{item.text}}</div>
</td>
<td>
<input type="checkbox" ng-model="item.isGotten" />
</td>
</tr>
</table>
</div>
</body>
And here's the Javascript:
function ShoppingListCtrl($scope) {
$scope.shoppingList = [
{
"text": "V8 fusion",
"isGotten": "true"
},
{
"text": "Whole milk container",
"isGotten": "false"
},
{
"text": "Protein bars",
"isGotten": "true"
}
];
};
Any idea why I can't get those checkboxes to respect the "true" and "false" values in the model? They always show unchecked whenever the page loads. Do I need to use ng-checked or a different directive?
872
An input element is created in the ag-Grid init lifecycle method (required) and it's checked attribute is set to the underlying boolean value of the cell it will be rendered in. A click event listener is added to the checkbox which updates this underlying cell value whenever the input is checked/unchecked.
The Input Checkbox defaultChecked property in HTML is used to return the default value of checked attribute. It has a boolean value which returns true if the checkbox is checked by default, otherwise returns false.
Return Value: It returns a string value that represents the value of the value attribute of a input checkbox field.
The problem is that you have "true" and "false" in quotes, which makes them strings instead of booleans that Angular can bind the checkbox to.
If you just remove the quotes as follows, your code then works correctly. A working example is at http://plnkr.co/edit/gkchmOBTkBtVv3TijlZW .
function ShoppingListCtrl($scope) {
$scope.shoppingList = [
{
"text": "V8 fusion",
"isGotten": true
},
{
"text": "Whole milk container",
"isGotten": false
},
{
"text": "Protein bars",
"isGotten": true
}
];
};
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
