Die Bindung von Optionsfeldern funktioniert nicht, wenn in AngularJS + Bootstrap

ein Data-Toggle-Attribut hinzugefügt wird. Ich verwende AngularJS zusammen mit Twitter Bootstrap und möchte zwei Optionsfelder wie normale Bootstrap-Schaltflächen aussehen lassen. Ich fand this example auf jsFiddle und nach dem Anwenden auf meinen Fall sieht alles gut aus, aber es funktioniert nicht richtig.Die Bindung von Optionsfeldern funktioniert nicht, wenn in AngularJS + Bootstrap

Ich möchte die Radiobuttons an ein Modell in Angular binden. Hier ist mein Code:

<div class="btn-group btn-group-lg btn-group-justified" data-toggle="buttons"> 
    <label class="btn btn-default"> 
     <input type="radio" name="isMad" ng-model="isMad" ng-value="false" /> No 
    </label> 
    <label class="btn btn-default"> 
     <input type="radio" name="isMad" ng-model="isMad" ng-value="true" /> Yes 
    </label> 
</div> 

<h1> 
    I am mad: {{ isMad }} 
</h1>

Und hier ist das Ergebnis von einem Klick auf das "Nein" (Radio) Taste:

So wird das Modell nicht gebunden. Wenn ich das Daten-Toggle-Attribut aus der Tastengruppe entfernen, funktioniert alles richtig, aber die Radio-Buttons sind nur auf der Oberseite der Bootstrap-Tasten wie in diesem Bild sichtbar gemacht:

Was soll ich tun, um zu haben Bootstrap-Buttons wie diese im ersten Bild und funktionieren mit AngularJS-Modellbindung wie diese im zweiten Bild?

Quelle

2015-10-06 Yulian

Haben Sie versucht, eindeutige IDs für jedes Eingabeelement festzulegen? – br3w5

@ br3w5 - yup, immer noch nicht funktioniert – Yulian

Angular und Bootstrap nicht immer gut zusammen spielen ... https: //angular-ui.github.io/bootstrap/#/buttons bietet eine Direktive zum Implementieren von Radio-Buttons mit Bootstrap und eckig – br3w5

Codierung ist richtig. scheint, als hättest du keine richtige Angulerjs-Version benutzt. Welche Version verwendest du? versuchen Sie mit 1.3

Quelle

2015-10-06 09:48:20 Nir

AngularJS v1.4.6 – Yulian

ich versuchte mit 1.3.8, derselbe Code funktioniert tadellos für mich. – Nir

So habe ich es in einem früheren Projekt mit einer benutzerdefinierten Anweisung für die Handhabung von Umfang getan. 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 mit ng-repeat. (working Plnkr)

radius.html

<div class="row"> 
    <div class="col-sm-12 col-md-12"> 
    <legend class="required">Choose a radius</legend> 
    </div> 
    <div class="col-sm-2 col-md-2"> 
    <fieldset> 

     <div class="form-group" ng-repeat="radius in vm.radiusValues"> 
      <div class="check-radio"> 
      <label for="{{ radius.id }}"> 
       <input type='radio' name="radio" id="{{ radius.id }}" value="{{ radius.value }}" ng-model="vm.radius">{{ radius.name }} 
      </label> 
      </div> 
     </div> 

    </fieldset> 

    <p>Selected value is {{ vm.radius }}</p> 

    </div> 
</div>

radius.directive.js

(function() { 
    'use strict'; 

    angular 
    .module('radius', []) 
    .directive('radius', radius) 
    .controller('RadiusCtrl', RadiusCtrl); 

    function radius() { 
     var directive = { 
      bindToController: true, 
      controller: 'RadiusCtrl', 
      controllerAs: 'vm', 
      replace: true, 
      restrict: 'E', 
      scope: {}, 
      templateUrl: 'radius.html' 
     }; 

     return directive; 
    } 

    function RadiusCtrl() { 
     var vm = this; 

     vm.radius = 500; 

     vm.radiusValues = [ 
      {name: '100m', value: 100, id: 'groupidrad1'}, 
      {name: '500m', value: 500, id: 'groupidrad2'}, 
      {name: '1000m', value: 1000, id: 'groupidrad3'}, 
      {name: '2000m', value: 2000, id: 'groupidrad4'} 
     ]; 
    } 
})();

Der Körper index.html

<body> 
    <radius></radius> 
</body>

Quelle

2015-10-06 12:32:50 br3w5

i Sie erraten sind nicht der einzige Das ist verrückt nach diesem Problem. Derzeit habe ich das gleiche Problem.

ich meine Abhilfe Lassen Sie zeigen:

<div class="btn-group" > 
    <label class="btn btn-info" ng-class="{ active : model === 'value1'}"> 
     <input type="radio" ng-model="model" value="value1" class="hide"> value 1 
    </label> 
    <label class="btn btn-info" ng-class="{ active : model === 'value2'}"> 
     <input type="radio" ng-model="model" value="value2" class="hide"> value 2 
    </label> 
    </div>

Der Schlüsselpunkt zu verstehen, ist es, den Daten-toogle = „Tasten“ Weichen fügt aditional Javascript Logik zu entfernen, 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 !.

Quelle

2016-05-13 20:43:00 Victor

Die Bindung von Optionsfeldern funktioniert nicht, wenn in AngularJS + Bootstrap

Antwort

Verwandte Themen