I've spent hours searching through similar questions, but haven't found a solution that perfectly matches my issue. What I need is to have a checkbox automatically checked based on a true/false value in my data using data binding. While I can successfully load the item names and retrieve checkbox values for saving to the server later, I'm struggling with getting the initial values to display correctly.
Here's a simple example highlighting the core 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 is the JavaScript code:
function ShoppingListCtrl($scope) {
$scope.shoppingList = [
{
"text": "V8 fusion",
"isGotten": "true"
},
{
"text": "Whole milk container",
"isGotten": "false"
},
{
"text": "Protein bars",
"isGotten": "true"
}
];
};
Can you figure out why the checkboxes are not reflecting the "true" and "false" values in the model? They always appear unchecked when the page loads. Should I be using ng-checked or another directive?