Die Bindung von Optionsfeldern funktioniert nicht, wenn in AngularJS + Bootstrap ein Data-Toggle-Attribut hinzugefügt wird
Ich benutze AngularJS zusammen mit Twitter Bootstrap und ich möchte zwei Radio-Buttons wie normale Bootstrap-Buttons aussehen lassen. Ich fand dieses Beispiel auf jsFiddle, und nach der Anwendung auf meinen Fall sieht alles gut aus, aber es funktioniert nicht richtig.
Ich möchte die Optionsfelder an ein Modell in Angular binden. Hier ist mein Code:
%Vor%Und hier ist das Ergebnis des Klickens auf die Schaltfläche "Nein" (Radio):
Also ist das Modell überhaupt nicht gebunden. Wenn ich das data-toggle-Attribut aus der Schaltflächengruppe entferne, funktioniert alles korrekt, aber die Optionsfelder werden wie oben auf den Bootstrap-Schaltflächen angezeigt:
Was muss ich tun, damit Bootstrap-Schaltflächen im ersten Bild wie diese aussehen und mit der AngularJS-Modellbindung wie diese im zweiten Bild korrekt funktionieren?
3 Antworten
So habe ich es in einem früheren Projekt mit einer benutzerdefinierten Direktive zur Handhabung des Bereichs gemacht. Die Verwendung einer benutzerdefinierten Direktive mit einem isolieren Bereich auf diese Weise ist optional. Es sollte immer noch für Sie arbeiten mit ng-Controller - der Unterschied ist die Einrichtung der Radio-Buttons in der Steuerung nicht die HTML-Rendering dann mit ng-repeat . ( Arbeiten Plnrkr )
radius.html
%Vor%radius.directive.js
%Vor%Der Hauptteil von index.html
%Vor%Ich denke, Sie sind nicht der einzige, der über dieses Thema wütend ist. Derzeit habe ich das gleiche Problem.
Lassen Sie mich meine Problemumgehung zeigen:
%Vor%Der Schlüsselpunkt zum Verständnis besteht darin, die data-toogle="Schaltflächen" zu entfernen, die zusätzliche JavaScript-Logik hinzufügen, die den Fehler verursacht. Und dann das Kontrollkästchen mit der Klasse ausblenden="ausblenden" in der gleichen Eingabe und setzen Sie den aktiven Zustand "manuell" entsprechend dem Wert Ihres Backing-Modell-Objekts.
Hoffe, das hilft!
Tags und Links angularjs radio-button binding twitter-bootstrap buttongroup