Struggling with a problem related to an Angular checkbox form that is generated from an API.
I am able to create checkboxes, but encountering two issues: The checked state of the boxes does not align with the values retrieved from the API, and when I click on the checkboxes, the name value changes from its default to "true" or "false." Despite looking at similar questions, I have been unable to resolve this issue. You can find the Plunk here along with the corresponding source code below:
<!doctype html>
<html ng-app="checkTest">
<head>
<meta charset="utf-8">
<title>Angular Multiple Checkboxes</title>
<style>
label {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script type="text/javaScript">
var jsonObj = {"fruits":[
{
"name": "Apple",
"desc": "abcdefg",
"selected": "true",
"status": "Created"
},
{
"name": "Broccoli",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "Cucumber",
"desc": "abcdefg",
"selected": "false",
"status": "Created"
},
{
"name": "Daikon",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
]};
var fruitsObj = jsonObj.fruits;
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<label ng-repeat="fruit in fruits">
<input type="checkbox" name="fruitSelect" ng-model="fruit.name" ng-value="{{fruit.name}}" ng-checked="fruit.selected"> {{fruit.name}}
</label>
<p>Services: {{fruits}}</p>
</div>
<script type="text/javaScript">
var app = angular.module('checkTest', []);
app.controller('MainCtrl', function($scope) {
$scope.fruits = fruitsObj;
});
</script>
</body>
</html>