引导数据切换中断 ng-show，反之亦然

Question

我有一个使用两个单选按钮的表单切换器：

                <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>

这按预期工作，我选择了一个单选按钮并相应地显示/隐藏相应的表单。

当我将data-toggle="buttons" 添加到上面的第二行<div class="btn-group"> 时，ng-hide 停止工作，但视觉状态的变化（显示为按下或未按下）工作正常。

<div class="btn-group" data-toggle="buttons">

当我删除data-toggle 时，我没有得到按钮颜色的变化来显示选择了哪个收音机（收音机黑点仍然正确显示）。

为什么data-toggle="buttons" 会阻止ng-show 工作？客户希望看到按钮/收音机在选择时改变颜色。

Answer 1

对我来说问题是 jQuery。

1. 在包含 bootstrap.min.js 时，它希望包含 jQuery。您可以删除 bootstrap.min.js 和 jQuery，只需在标签上放置 ng-class 即可设置活动状态。

从上面参考 Mart 的小提琴以获取 ng-class 示例。

1. 如果删除 jQuery 不适合您： 另一个选项在上面的 cmets 中说只是为了删除数据切换。从那里你可以直接在你的无线电输入上抛出一个style="display:none" 或在你的样式表中创建一个类。

Answer 2

你有多余的<div class="radio">。

删除它们，它应该像 this fiddle 一样工作。