相关疑难解决方法(0)

我正在使用AngularJS和Twitter Bootstrap,我想让两个单选按钮看起来像普通的Bootstrap按钮.我在jsFiddle上找到了这个例子,在将它应用到我的情况后,一切看起来都很好但是它没有正常工作.

我想将单选按钮绑定到Angular中的模型.这是我的代码:

<div class="btn-group btn-group-lg btn-group-justified" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="isMad" ng-model="isMad" ng-value="false" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="isMad" ng-model="isMad" ng-value="true" /> Yes
    </label>
</div>

<h1>
    I am mad: {{ isMad }}
</h1>

这是点击"否"(收音机)按钮的结果:

所以,模型根本没有约束力.当我从按钮组中删除data-toggle属性时,一切正常,但单选按钮在Bootstrap按钮的顶部可视化,如下图所示:

我应该怎么做才能让第一张图片中的Bootstrap按钮看起来像这样,并且在第二张图片中正确使用AngularJS模型绑定？

我想在我的代码中看到一个单选按钮组.我使用AngularJs,Angular-Strap和Bootstrap.

问题是,当我点击另一个按钮时,控制器中的变量不会更新.默认值已设置.如果我删除输入标签周围的标签,更新发生...我不知道这是一个错误,或者我是否做错了什么..

我希望我提供了你需要的任何信息.谢谢你的帮助!!

版本:AngularJS:1.2.16 AngularStrap:2.0.2 Bootstrap:3

HTML:

<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/style.css" rel="stylesheet" />
<link href="Content/bootstrap-additions.css" rel="stylesheet" />
<link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css">

单选按钮:

<label class="control-label">Group By:</label>

<div class="btn-group" ng-model="groupBy.value" data-bs-radio-group>
  <label class="btn btn-default" for="all">
    <input name="all" type="radio" class="btn btn-default" value="all">
     All
    </label>

   <label class="btn btn-default" for="room">
     <input name="room" type="radio" class="btn btn-default" value="room">
      Room
   </label>

   <label class="btn btn-default" for="category">
     <input name="category" type="radio" class="btn btn-default" value="category">
      Category
   </label>
</div>

二手图书馆:

<script src="libraries/angular.min.js"></script>
<script src="libraries/jquery.min.js"></script>

<!-- UI Libs -->
<script src="libraries/bootstrap.min.js"></script>
<script src="libraries/angular-strap.min.js"></script> …