Winkel-Strap Radio Button wird nicht aktualisiert Modell

Ich möchte eine Radio-Button-Gruppe haben, wie Sie in meinem Code sehen können. Ich benutze AngularJs, Angular-Strap und Bootstrap.Winkel-Strap Radio Button wird nicht aktualisiert Modell

Das Problem ist, dass meine Variablen im Controller nicht aktualisiert werden, wenn ich auf eine andere Schaltfläche klicke. Der Standardwert ist festgelegt. Wenn ich die Etiketten um die Eingabe-Tags entfernen, geschieht die Aktualisierung ... Ich weiß nicht, ob das ein Fehler ist, oder wenn ich etwas falsch mache ..

Ich hoffe, ich habe alle Informationen zur Verfügung gestellt, die Sie brauchen. Danke für jede Hilfe !!

Versionen: 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>

Gebrauchte Bibliotheken:

<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:

Definition Modul:

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

Quelle

2014-05-12 Bagorolin

Warum brauchen Sie 'for' Attribut der Etiketten? Kannst du sie entfernen? Ihr Code kann Arbeit bekommen, indem Sie einfach das "for" -Attribut von Labels entfernen. –

Können Sie zeigen, wie Sie Ihr Modul definieren? – tasseKATT

Das 'for'-Label war nur ein Experiment. Ich dachte, vielleicht würde es den Klick zum Radio-Eingang weiterleiten ... Es funktioniert auch ohne es nicht. – Bagorolin

Nachdem ich diese Arbeit sah plnkr klebte ich meinen Code in das Teil für Teil. Da es noch gearbeitet feeled ich, wie ich habe etwas pranked oder ...

So nach einer loooooong Versuch und Irrtum Phase I den Unterschied entdeckt ....

Wenn ich schließe die jquery.js nach Ich schließe bootstrap.min.js ein Ich erhalte den Fehler, dass Bootstrap's JavaScript jQuery benötigt. Dies führte zu dem Fall, dass Bootstrap nicht korrekt enthalten war und alles funktionierte.

Irgendwann in meiner Entwicklung brauchte ich Bootstrap.min.js, aber ich bemerkte, ich brauche es nicht mehr. Wahrscheinlich erledigt eine andere Datei diesen Job. Das Entfernen der Datei bootstrap.min.js löste das Problem.

Quelle

2014-05-13 19:37:07 Bagorolin

Vielen Dank. Du hast mir Stunden der Forschung gerettet :). –

Erstaunlich! Es scheint, dass Angular Strap bootstrap.js überhaupt nicht benötigt. Ich habe jedoch kein Anzeichen dafür in den Dokumenten gefunden. –

Winkel-Strap Radio Button wird nicht aktualisiert Modell

Antwort

Verwandte Themen