当在AngularJS + Bootstrap中添加data-toggle属性时，单选按钮绑定无法正常工作

Question

当在AngularJS + Bootstrap中添加data-toggle属性时，单选按钮绑定无法正常工作

angularjstwitter-bootstrapbindingradio-buttonbuttongroup

9

我正在使用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模型绑定，我应该怎么做？

- Yulian

1

Angular和Bootstrap并不总是完美兼容的...https://angular-ui.github.io/bootstrap/#/buttons提供了一个指令，用于在Bootstrap和Angular中实现单选按钮。 - br3w5

还有这个 https://dev59.com/FWIk5IYBdhLWcg3wku9n - br3w5

可能是[ng-change,ng-click dont work with data-toggle="buttons" since v1.3.0]的重复问题。(https://dev59.com/cl4c5IYBdhLWcg3wdKKT) - br3w5

@br3w5 - 你发了很多帖子，哈哈。我决定采用angular-ui的方式，因为我认为它更直观，并且我已经在我的项目中使用它了。现在一切都正常工作，所以如果你能给出一个好的使用示例并将其发布为答案，我会选择它作为被接受的答案，以便它也可以帮助其他人。:)谢谢你的帮助，伙计。 - Yulian

是的哈哈，有相当多的链接...我已经成功地使用了Angular UI Bootstrap来处理单选按钮，所以我会将其发布为答案。 - br3w5

显示剩余4条评论

3个回答

1

以下是我在之前的一个项目中用于处理作用域的自定义指令的方法。使用具有隔离作用域的自定义指令是可选的。您仍然可以使用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>

- br3w5

0

从编码角度来看是正确的。看起来您没有使用正确的AngularJS版本。您使用的是哪个版本？尝试使用1.3版本

- NiranjanK

我尝试了1.3.8版本，相同的代码对我完美地运行。 - NiranjanK

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Victor · Accepted Answer

我猜你不是唯一一个对这个问题感到生气的人。目前我也面临着同样的问题。

让我向你展示我的解决方法：

 <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" 的复选框，该输入框根据您的后台模型对象的值手动设置活动状态。

希望这可以帮助您！