Angular-Strap Radio Button won't update model

StackOverflow https://stackoverflow.com/questions/23613450

سؤال

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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top