角带单选按钮将不会更新模型 [英] Angular-Strap Radio Button won't update model
问题描述
我想有一个单选按钮组，你可以在我的code看到的。我用AngularJs，角肩带和引导。
问题是，当我点击另一个按钮我在控制器中的变量将不会更新。缺省值被设定。
如果我删除周围的输入标签的标签，更新时...我不知道这是否是一个错误，或者如果我做一些错误。
我希望我提供你需要的任何信息。
感谢您的帮助！
版本：
AngularJS：1.2.16
AngularStrap：2.0.2
引导：3
HTML
＆LT;链接HREF =内容/ bootstrap.min.css的rel =stylesheet属性/＆GT;
＆LT;链接HREF =内容/ style.css文件的rel =stylesheet属性/＆GT;
＆LT;链接HREF =内容/引导-additions.css的rel =stylesheet属性/＆GT;
＆LT;链接rel =stylesheet属性HREF =// rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css\">
单选按钮：
＆LT;标签类=控制标签基团通过：LT; /标签＆gt;＆LT; DIV CLASS =BTN-组NG模型=groupBy.value数据-BS-无线电组＆gt;
＆LT;标签类=BTN BTN-默认为=所有＆GT;
＆LT;输入名称=所有TYPE =无线电级=BTN BTN-默认值=所有＆GT;
所有
＆LT; /标签＆gt; ＆LT;标签类=BTN BTN-默认为=房间＆GT;
＆LT;输入名称=房间类型=无线电级=BTN BTN-默认值=房间＆GT;
房间
＆LT; /标签＆gt; ＆LT;标签类=BTN BTN-默认为=类别＆GT;
＆LT;输入名称=类别类型=无线电级=BTN BTN-默认值=类别＆GT;
类别
＆LT; /标签＆gt;
＆LT; / DIV＆GT;
用于库：
＆LT;脚本SRC =库/ angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =库/ jquery.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT;！ - UI利布斯 - ＆GT;
＆LT;脚本SRC =库/ bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =库/角strap.min.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =库/角strap.tpl.min.js＆GT;＆LT; / SCRIPT＆GT;
控制器：
$ scope.groupBy = {
值：房间
};
更新：
模块定义：
VAR应用= angular.module（'deviceApp'，['ngRoute'，'mgcrea.ngStrap'，'ngAnimate']）;
的app.config（函数（$ routeProvider）{
$ routeProvider
。当（'/设备，
{
控制器：'DeviceController'，
templateUrl：/app/partials/devices.html
}）
不然的话（{redirectTo：'/设备'}）;
}）;app.controller（'DeviceController'，函数（$范围，$日志$警觉，deviceService）{
$ scope.groupBy = {
值：房间
};
...＆LT; HTML数据-NG-应用=deviceApp＆GT;
...
我看到这个工作plnkr我用一部分粘贴我的code到它的一部分之后。
因为它仍然工作，我喜欢feeled我被恶作剧什么的...
因此，一个loooooong试错阶段之后，我发现了差异....
如果我有以后的jquery.js 我包括bootstrap.min.js我得到的错误，即引导的JavaScript需要jQuery的。这导致的情况下，自举是不包括正确的和一切工作。
在我开发了一段时间，我需要Bootstrap.min.js但我注意到，我不需要它了。也许一些其他的文件现在做这个工作。因此，移除bootstrap.min.js文件解决了这个问题。
I want to have a radio-button group as you can see in my code. I use AngularJs, Angular-Strap and Bootstrap.
The problem is, that my variables in the controller won't update when I click another button. The default value is set. If i remove the labels around the input tags, the update occurs... I don't know if this is a bug, or if I am making something wrong..
I hope I provided any information you need. Thanks for any help!!
Versions: 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">
Radio Button:
<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>
Used Libraries:
<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'
};
Update:
Module Definition:
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">
...
After I saw this working plnkr I pasted my code into it part by part. Since it still worked I feeled like I got pranked or something...
So after a loooooong trial and error phase I discovered THE difference....
If I include the jquery.js after I include bootstrap.min.js I get the error, that Bootstrap's JavaScript requires jQuery. This resulted to the case, that bootstrap wasn't included correct and everything worked.
At some time in my development I needed Bootstrap.min.js but I noticed, I don't need it anymore. Probably some other file now does that job. So removing the bootstrap.min.js file solved the problem.
这篇关于角带单选按钮将不会更新模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
