I am using nested ng-repeats to display content on a page. The nested ng-repeat displays a checkbox and the checked status of that checkbox should be set to the boolean value of the data in the ng-repeat. I am using ng-checked and passing in a truthy value, however, the checkboxes are always checked regardless of the value.
I have simplified my code into a demo that displays the behaviour jsFiddle.
HTML
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-repeat="item in myArray">
<h3>{{ $index }}. {{ item.title }}</h3>
<div ng-repeat="child in item.subArray">
<h4>({{ child.id }}). {{child.title}} </h4>
<input type="checkbox" ng-checked="child.result" />
<h6>Answer is: {{ child.result }}</h6>
</div>
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', []);
function myController($scope) {
$scope.myArray = [
{ id: "1", title: "my array 1", subArray: [
{ id: "1", title: "my sub array 1", result: "false" },
{ id: "1", title: "my sub array 2", result: "true" },
{ id: "1", title: "my sub array 3", result: "false" },
{ id: "1", title: "my sub array 4", result: "true" },
{ id: "1", title: "my sub array 5", result: "false" }]
},
{ id: "1", title: "my array 2", subArray: [
{ id: "1", title: "my sub array 1", result: "true" },
{ id: "1", title: "my sub array 2", result: "false" },
{ id: "1", title: "my sub array 3", result: "true" },
{ id: "1", title: "my sub array 4", result: "false" },
{ id: "1", title: "my sub array 5", result: "true" }]
},
{
id: "1", title: "my array 3", subArray: [
{ id: "1", title: "my sub array 1", result: "false" },
{ id: "1", title: "my sub array 2", result: "false" },
{ id: "1", title: "my sub array 3", result: "true" },
{ id: "1", title: "my sub array 4", result: "false" },
{ id: "1", title: "my sub array 5", result: "false" }]
},
{
id: "1", title: "my array 4", subArray: [
{ id: "1", title: "my sub array 1", result: "true" },
{ id: "1", title: "my sub array 2", result: "false" },
{ id: "1", title: "my sub array 3", result: "false" },
{ id: "1", title: "my sub array 4", result: "false" },
{ id: "1", title: "my sub array 5", result: "true" }]
},
{
id: "1", title: "my array 5", subArray: [
{ id: "1", title: "my sub array 1", result: "true" },
{ id: "1", title: "my sub array 2", result: "true" },
{ id: "1", title: "my sub array 3", result: "false" },
{ id: "1", title: "my sub array 4", result: "true" },
{ id: "1", title: "my sub array 5", result: "true" }]
}
];
}
Can someone explain why this behaviour occurs and help me understand how to rectify it?
Aucun commentaire:
Enregistrer un commentaire