我想在我的代码中看到一个单选按钮组。我使用AngularJs,Angular-Strap和Bootstrap。
问题是,当我点击另一个按钮时,控制器中的变量不会更新。默认值已设置。 如果我删除输入标签周围的标签,则更新发生...我不知道这是一个错误,还是我做错了什么..
我希望我提供了您需要的任何信息。 谢谢你的帮助!!
版本: 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>
控制器:
$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">
...
答案 0 :(得分:13)
在我看到这个工作的plnkr之后,我将我的代码逐个粘贴到它中。 既然它仍然有效,我就像我恶作剧或其他东西一样... ...
因此,在一个loooooong试错阶段后,我发现了差异......
如果我在之后包含jquery.js ,我包含bootstrap.min.js我得到错误,Bootstrap的JavaScript需要jQuery。这导致了这种情况,引导包不正确,一切正常。
在我开发的某个时候,我需要Bootstrap.min.js,但我注意到,我不再需要它了。可能其他一些文件现在可以完成这项工作。因此删除bootstrap.min.js文件解决了这个问题。