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

4ioopgfo 于 12个月前发布在 Angular

关注(0)|答案(3)|浏览(94)

我正在使用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模型绑定？

angularjs

来源：https://stackoverflow.com/questions/32966449/radio-buttons-binding-is-not-working-when-a-data-toggle-attribute-is-added-in-an

3条答案

按热度按时间

6bc51xsx1#

我想你不是唯一一个对这个问题感到愤怒的人。目前我正面临着同样的问题。
让我给你看看我的解决方法：

<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"的复选框，然后根据您的支持模型对象的值“手动”设置活动状态。

赞(0）回复(0）举报 12个月前

sigwle7e2#

下面是我在以前的项目中使用自定义指令处理作用域的方法。以这种方式将自定义指令与隔离范围一起使用是可选的。使用ng-controller它应该仍然可以工作区别是在控制器中设置单选按钮，而不是使用ng-repeat渲染的html。（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的主体