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"添加到上面的第2行<div class="btn-group">时，ng-hide停止工作但是视觉状态的变化（显示按下或未按下）可以正常工作。

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

当我移除data-toggle时，我没有获得按钮颜色的变化来显示选择了哪个无线电（无线电黑点仍然正确显示）。

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

Answer 1

对我来说问题是jQuery。

当包含bootstrap.min.js时，它想要包含jQuery。你可以删除bootstrap.min.js＆amp; jQuery，只需在标签上放置ng-class即可设置活动状态。

参考Mart的上述ng-class示例。

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

Answer 2

您有额外的<div class="radio">。

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

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

2 个答案: