Angular-Strap 单选按钮不会更新模型答案

【问题标题】：Angular-Strap Radio Button won't update modelAngular-Strap 单选按钮不会更新模型
【发布时间】：2014-05-12 15:48:43
【问题描述】：

我想要一个单选按钮组，正如您在我的代码中看到的那样。我使用 AngularJs、Angular-Strap 和 Bootstrap。

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

我希望我提供了您需要的任何信息。感谢您的帮助！

版本： AngularJS：1.2.16 角带：2.0.2 引导：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>
<script src="libraries/angular-strap.tpl.min.js"></script>

控制器：

$scope.groupBy = {
    value: 'room'
};

更新：

模块定义：

var app = angular.module('deviceApp', ['ngRoute','mgcrea.ngStrap','ngAnimate']);
app.config(function ($routeProvider) {
  $routeProvider
    .when('/devices',
        {
            controller: 'DeviceController',
            templateUrl: '/app/partials/devices.html'
        })
    .otherwise({ redirectTo: '/devices' });
});

app.controller('DeviceController', function ($scope, $log, $alert, deviceService) {
  $scope.groupBy = {
    value: 'room'
  };
...

<html data-ng-app="deviceApp">
...

【问题讨论】：

为什么需要标签的for 属性？你能删除它们吗？您的代码只需删除标签的for 属性即可开始工作。
你能说明你是如何定义你的模块的吗？
“for”标签只是一个实验。我想也许它会将点击转发到无线电输入......没有它它也不起作用。
在没有for 的情况下工作：plnkr.co/edit/SUdgv5rIVdJMLhiHFOiJ?p=preview

标签： angularjs twitter-bootstrap-3 angular-strap

【解决方案1】：

在我看到这个有效的 plnkr 后，我将我的代码部分粘贴到其中。由于它仍然有效，我觉得我被恶作剧或什么的......

所以经过漫长的反复试验阶段后，我发现了不同之处......

如果我包含 jquery.js after 我包含 bootstrap.min.js 我会收到错误，即 Bootstrap 的 JavaScript 需要 jQuery。这导致了这种情况，即引导程序未包含正确且一切正常。

在我开发的某个时候，我需要 Bootstrap.min.js，但我注意到，我不再需要它了。现在可能有其他文件可以完成这项工作。所以删除 bootstrap.min.js 文件解决了这个问题。

【讨论】：

谢谢。你为我节省了数小时的研究时间:)。
太棒了！ Angular Strap 似乎根本不需要 bootstrap.js。但是我在文档中没有找到任何迹象。