Bootstrap 数据切换中断 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>

这是按预期工作的，我相应地选择了一个单选按钮和适当的表格 show/hide。

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

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

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

为什么 data-toggle="buttons" 会阻止 ng-show 工作？客户希望看到 button/radio 在 select 上更改颜色。

Answer 1

你有额外的 <div class="radio">.

删除它们，它应该像 this fiddle.

中那样工作

Answer 2

我的问题是 jQuery。

当包含 bootstrap.min.js 时，它想包含 jQuery。您可以删除 bootstrap.min.js & jQuery ，其中只需在标签上放置一个 ng-class 即可设置活动状态。

参考 Mart 的 fiddle 来自上面的 ng-class 个示例。

如果删除 jQuery 不适合您：另一个选项在上面的评论中说只是删除数据切换。从那里你可以直接在你的收音机输入上扔一个 style="display:none" 或在你的风格 sheet.

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

Bootstrap data-toggle breaks ng-show and vice versa

html

twitter-bootstrap

angularjs

ng-show