Question

我正在使用AngularJS和Twitter Bootstrap，我想让两个单选按钮看起来像普通的Bootstrap按钮。我在jsFiddle上找到了this example，在将它应用到我的案例后，一切看起来都不错，但是它运行不正常。

我想将单选按钮绑定到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模型绑定？

Answer 1

我猜你并不是唯一对这个问题感到愤怒的人。目前我遇到了同样的问题。

让我告诉你我的解决方法：

 <div class="btn-group">
    <label class="btn btn-info" ng-class="{ active : model === 'value1' }">
      <input type="radio" ng-model="model" value="value1" class="hide"> value 1
    </label>
    <label class="btn btn-info" ng-class="{ active : model === 'value2' }">
      <input type="radio" ng-model="model" value="value2" class="hide"> value 2
    </label>
  </div>

要理解的关键点是删除data-toggle="buttons"，这会添加导致错误的其他JavaScript逻辑。然后在同一输入中隐藏带有class="hide"的复选框，然后根据背景模型对象的值“手动”设置活动状态。

希望这有帮助！

Answer 2

以下是我在之前的项目中使用自定义指令处理范围的方法。以这种方式使用具有隔离范围的自定义指令是可选的。它应该仍然适用于使用ng-controller - 区别在于设置控制器中的单选按钮而不是html，然后使用ng-repeat进行渲染。（working Plnkr）

radius.html

<div class="row">
  <div class="col-sm-12 col-md-12">
    <legend class="required">Choose a radius</legend>
  </div>
  <div class="col-sm-2 col-md-2">
    <fieldset>

        <div class="form-group" ng-repeat="radius in vm.radiusValues">
          <div class="check-radio">
            <label for="{{ radius.id }}"> 
              <input type='radio' name="radio" id="{{ radius.id }}" value="{{ radius.value }}"  ng-model="vm.radius">{{ radius.name }} 
            </label>
          </div>  
        </div>

    </fieldset> 

    <p>Selected value is {{ vm.radius }}</p>

  </div>
</div>

radius.directive.js

(function() {
    'use strict';

    angular
    .module('radius', [])
    .directive('radius', radius)
    .controller('RadiusCtrl', RadiusCtrl);

    function radius() {
        var directive = {
            bindToController: true,
            controller: 'RadiusCtrl',
            controllerAs: 'vm',
            replace: true,
            restrict: 'E',
            scope: {},
            templateUrl: 'radius.html'
        };

        return directive;
    }

    function RadiusCtrl() {
        var vm = this;

        vm.radius = 500;

        vm.radiusValues = [
            {name: '100m', value: 100, id: 'groupidrad1'},
            {name: '500m', value: 500, id: 'groupidrad2'},
            {name: '1000m', value: 1000, id: 'groupidrad3'},
            {name: '2000m', value: 2000, id: 'groupidrad4'}
        ];
    }
})();

index.html的正文

<body>
    <radius></radius>
</body>

Answer 3

明智地编码。好像你没有使用适当的Angulerjs版本。你使用哪个版本？试试1.3

在AngularJS + Bootstrap中添加数据切换属性时，单选按钮绑定不起作用

3 个答案: