Angular-Strap单选按钮无法更新模型

Question

Angular-Strap单选按钮无法更新模型

angularjstwitter-bootstrap-3angular-strap

6

我想在我的代码中实现一个单选按钮组。我使用AngularJs、Angular-Strap和Bootstrap。

问题是，当我点击其他按钮时，控制器中的变量不会更新。默认值已设置。

如果我删除input标签周围的标签，更新将发生... 我不知道这是一个错误，还是我在做错什么...

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

版本: AngularJS: 1.2.16 AngularStrap: 2.0.2 Bootstrap :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>

Controller:

$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">
...

- Dominik

你为什么需要标签的for属性？你能把它们去掉吗？只需删除标签的for属性即可让你的代码正常工作。 - Alireza Ahmadi

你能展示一下你如何定义你的模块吗？ - tasseKATT

“for”标签只是一个实验。我以为它可以将点击转发到单选框输入...但没有它也不起作用。 - Dominik

不需要使用for循环就可以工作：http://plnkr.co/edit/SUdgv5rIVdJMLhiHFOiJ?p=preview - tasseKATT

1个回答

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

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

- Dominik · Accepted Answer

在看到这个可行的plnkr后，我逐步将我的代码粘贴进去。由于它仍然有效，我感觉自己被愚弄了或者发生了什么事情......

所以，在一个漫长的试错阶段之后，我发现了其中的区别......

如果我在包含bootstrap.min.js之后再引入jquery.js，就会出现错误，即Bootstrap的JavaScript需要jQuery。这导致bootstrap未正确引入，但一切都有效。

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