I have a form switcher using two radio buttons:
<form>
<div class="btn-group">
<div class="radio">
<label class="btn btn-info">
<input type="radio" name="formSwitcher" id="gNr" ng-model="vm.formSwitcher" value="gNr" /> Form for new G
</label>
</div>
<div class="radio">
<label class="btn btn-info">
<input type="radio" name="formSwitcher" id="pNr" ng-model="vm.formSwitcher" value="pNr" /> Form for new P
</label>
</div>
</div>
</form>
<div ng-show="vm.formSwitcher == 'gNr' ">
<form> ... </form>
</div>
<div ng-show="vm.formSwitcher == 'pNr' ">
<form> ... </form>
</div>
This is working as expected, I choose a radio button and the appropriate forms show/hide accordingly.
When I add data-toggle="buttons"
to the 2nd line above, <div class="btn-group">
, the ng-hide
stops working BUT the change in visual state (appearing pressed or unpressed) works fine.
<div class="btn-group" data-toggle="buttons">
When I remove the data-toggle
I don't get the variation in button color to show which of the radios is selected (the radio black dot still appears correctly).
Why would data-toggle="buttons"
stop ng-show
from working? The customer wants to see the button/radio change color on select.