Objective: My aim is to show the content of a div according to the status of checkboxes, while also ensuring that these divs are visible by default
If I have this code snippet:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
</head>
<body ng-app>
<label>red <input type="checkbox" ng-model="red" /></label><br />
<label>blue <input type="checkbox" ng-model="blue" /></label><br />
<div ng-show="red" style="width: 50px; height: 50px; background-color: red;"></div><br />
<div ng-show="blue" style="width: 50px; height: 50px; background-color: blue;"></div><br />
<div ng-show="red" style="width: 50px; height: 50px; background-color: red;"></div><br />
</body>
</html>
In this code, my checkboxes are not pre-selected and each div appears correctly when one of the checkboxes is checked.
Next, I attempted to add:
ng-checked='true'
Now my checkboxes are initially checked, but the divs remain hidden. I tried experimenting with ng-init, ng-hide, or ng-load, but my knowledge of Angular is quite limited.
Could someone guide me in the right direction?