I need to display a specific div when a input-radio is selected.
<div>
<div class="radio c-radio">
<label>
<input type="radio" name="specialType" ng-model="vm.specialType.closed" />
<span class="fa fa-check"></span>First Radio
</label>
</div>
<div ng-show="vm.specialType.closed">
<label>Day: </label>
<input type="date" class="form-control" />
</div>
</div>
I have a total of 4 radio inputs set up similarly. I want each one to show or hide based on the selection made. I attempted using ng-click='someFunction()', but it wasn't effective, and I am searching for a better approach.
If, for instance, the first radio is checked, and then the third is selected, I aim to hide the currently visible div and reveal the first one again.
In my controller, there's a variable structured like this. Initially, I planned to use it to toggle between true and false values for show/hide purposes. However, I'm open to exploring more elegant and streamlined solutions.
vm.specialType = {
closed: false, //1st radio
open: false, //2nd radio
ownGuards: false, //3rd radio
foreignGuards: false //4th radio
};