Menu
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">
...
356
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.
195
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
