Javascript AngularJS：单选按钮不适用于引导3

我有一个单选按钮，它根据事务类型的值设置

True

或

False

的值

可以找到演示

问题是，当我单击任何单选按钮时，

$scope.transaction.debit

的值不会改变

我的javascript代码是

    var app = angular.module('myApp', []);

    app.controller("MainCtrl", function($scope){
      $scope.transaction = {};
      $scope.transaction.debit=undefined;

      console.log('controller initialized');
    });

请让我知道我做错了什么

---

此外，我不想为此使用

角度UI

或

角度陷阱

，除非没有其他选项可用。

单选按钮顶部粘贴了一个大标签，防止输入单选按钮。 html应为：

 <input type="radio" data-ng-model="transaction.debit" value="True">Debit</input>

 <input type="radio" data-ng-model="transaction.debit" value="False">Credit</input>

借记卡
信用

---

然后它就可以工作了，当然它可能看起来不像你想要的那样。

这里有一个使用新指令的工作版本：

html

<section ng-controller="MainCtrl">
<div class="form-group">
    <label class="col-lg-2 control-label">Type</label>

    <div class="btn-group col-lg-3" data-toggle="buttons">
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="True">
            Debit
        </label>
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="False">
            Credit
        </label>
    </div>

    <p>Transaction type: {{transaction.debit}}</p>
</div>
</section>

<div class="btn-group col-lg-3">
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '0'}">
    <input type="radio" data-ng-model="transaction.debit" value="0"> Debit
  </label>
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '1'}">
    <input type="radio" data-ng-model="transaction.debit" value="1"> Credit
  </label>
</div>

<p>Transaction type: {{transaction.debit}}</p>

---

如果删除反引导代码，则可以使用条件控制样式

<label class="btn btn-default" ng-class="{'active': transaction.debit == 'some'}">
    <input type="radio" data-ng-model="transaction.debit" name="debit" value="some"> Some
</label>
<label class="btn btn-default" ng-class="{'active': transaction.debit == 'other'}">
    <input type="radio" data-ng-model="transaction.debit" name="debit" value="other"> Other
</label>

一些
其他

我在

bootstrap.js

中发现了问题。注释行

e.preventDefault（）

，它可以工作

// BUTTON DATA-API
// ===============
$(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    e.preventDefault() //Before
    //e.preventDefault() //After
})
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
})

---

我也有同样的问题，在我的例子中，默认样式改变了，不能在任何单选按钮或复选框按钮中使用angular ng model。所以我读了一些文章，发现有时候如果在引导之后加载JQuery，它会覆盖JQuery的任何其他实例，并且会阻止默认样式和组件作为引导组件加载，如果在JQuery或viceversa之后加载angularJS，也会发生这种情况

---

PS.-我的答案是：检查你的加载脚本堆栈，使用它并找到适合你的顺序。（首先是jquery，然后是angularJs，最后是bootstrap）。通常，您需要将jQuery作为第一个选项，而且几乎每个新框架都在它之上工作。干杯。

基于francisco.preller的回答，我写了两个解决方案，试图使其适合通用，而不丢失输入标签： html:

解决方案#2：

我觉得第一个更好，因为它可以让angular完成更新工作。

我修改了。您可以在不删除bootsrap.js依赖项的情况下使用。还有一个工作示例

这就是流程：

删除用于防止引导执行的

data toggle=“buttons”

添加一些CSS以修复损坏的视图（btn radio CSS类）

为选中的样式效果添加一些AngularJS逻辑

html

<section ng-controller="MainCtrl">
<div class="form-group">
    <label class="col-lg-2 control-label">Type</label>

    <div class="btn-group col-lg-3" data-toggle="buttons">
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="True">
            Debit
        </label>
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="False">
            Credit
        </label>
    </div>

    <p>Transaction type: {{transaction.debit}}</p>
</div>
</section>

<div class="btn-group col-lg-3">
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '0'}">
    <input type="radio" data-ng-model="transaction.debit" value="0"> Debit
  </label>
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '1'}">
    <input type="radio" data-ng-model="transaction.debit" value="1"> Credit
  </label>
</div>

<p>Transaction type: {{transaction.debit}}</p>

风格

.btn-radio > input[type=radio] {
  position       : absolute;
  clip           : rect(0, 0, 0, 0);
  pointer-events : none;
}

---

我也有同样的问题。使用ng单击标签，可以很好地使用引导

<label class="btn btn-default" ng-click="transaction.debit = 'debit'">

---

如果有人仍在寻找一种简单的方法来实现这一点（我个人不太愿意用指令来重载代码），我会这样做：

您可以使用标签上的

ng单击
来设置值。此外，请注意第一个无线电项目标签上的
ng init
和
active
类。这样，您就可以让引导程序完成它的任务，而angular完成它的任务。唯一的缺点是，您不允许使用ng模型进行角度控制

<div class="btn-group col-lg-3" data-toggle="buttons">
      <label class="btn btn-default active" ng-init="transaction.debit=true" ng-click="transaction.debit=true">
        <input type="radio" checked> Debit
      </label>
      <label class="btn btn-default" ng-click="transaction.debit=false">
        <input type="radio"> Credit
      </label>
    </div>


借记
信用
你说得对。删除单选按钮周围的引导代码可以使它们再次工作。我怀疑单选按钮实际上没有被选择，因为引导？请注意，删除对bootstrap.js文件的脚本引用也会使它们再次工作，即使CSSY正在工作，您也可能会发现类似的问题（）。虽然它涉及到库的冲突，主要指的是
bootstrap3
+
angular-strap
，但是有人（或者将来的你）可能会寻找它。删除bootstrap.js文件修复了这个问题，这让我相信它与标签无关，但更多的是与javascript引导有关。同时，删除标签当然会停止引导javascript在这些对象上运行。另一种方法是使用ng click在标签上处理点击和数据交互。这样就不必删除引导javascript。这个链接解释了如何使用引导和角度：即使是Plunker也在抱怨这个错误的
结束标记。这是一个如何选择的答案？我发现关键问题是删除
data toggle=“buttons”
以禁用bootstrap.js功能，然后添加上述样式以补偿实际单选按钮的重新出现。我仍然在Angular 6中面临这个问题，我通过删除
data toggle=“buttons”解决了这个问题
并向每个标签添加
[class.active]=“option==“value”
。我不需要做任何CSS更改。完美。这就是问题所在。我在jquery.min.js之前加载了bootstrap.min.js，问题完全消失了！谢谢。不幸的是，这解决了这个特定的问题，但打破了其他一切，因为jQuery是bootstrapt的依赖项。这个答案并不理想，但在本页上是最好的。该指令太具体了。您的解决方案将丢失引导功能
.debit=undefined
什么也不做-1.
.btn-radio > input[type=radio] {
  position       : absolute;
  clip           : rect(0, 0, 0, 0);
  pointer-events : none;
}

<label class="btn btn-default" ng-click="transaction.debit = 'debit'">

<div class="btn-group col-lg-3" data-toggle="buttons">
      <label class="btn btn-default active" ng-init="transaction.debit=true" ng-click="transaction.debit=true">
        <input type="radio" checked> Debit
      </label>
      <label class="btn btn-default" ng-click="transaction.debit=false">
        <input type="radio"> Credit
      </label>
    </div>