Wiązanie przycisków radiowych nie działa po dodaniu atrybutu przełączania danych w AngularJS + Bootstrap

Używam AngularJS wraz z Bootstrap na Twitterze i chcę, aby dwa przyciski opcji wyglądały jak normalne przyciski Bootstrap. Znalazłem this example na jsFiddle i po zastosowaniu go w moim przypadku wszystko wygląda dobrze, ale nie działa poprawnie.Wiązanie przycisków radiowych nie działa po dodaniu atrybutu przełączania danych w AngularJS + Bootstrap

Chcę powiązać przyciski radiowe z modelem w ustawieniu kątowym. Oto mój kod:

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

A oto wynik klikając na „nie” (radia) Przycisk:

Tak, model nie jest związany w ogóle. Kiedy usunąć atrybut data-przełączania z grupy przycisków, wszystko działa poprawnie, ale przyciski radiowe są wizualizowane tylko na górze przycisków Bootstrap jak na tym zdjęciu:

Co należy zrobić, aby mieć przyciski Bootstrap wyglądające jak te na pierwszym obrazku i działające poprawnie z powiązaniem modelu AngularJS, tak jak te w drugim?

Źródło

2015-10-06 Yulian

Czy próbowałeś ustawić unikatowe identyfikatory dla każdego elementu wejściowego? – br3w5

@ br3w5 - yup, nadal nie działa – Yulian

Angular i Bootstrap nie zawsze grają dobrze razem ... https: //angular-ui.github.io/bootstrap/#/buttons zapewnia dyrektywę do wprowadzania przycisków radiowych z bootstrapem i kątowy – br3w5

Kodowanie jest poprawne. wygląda na to, że nie używasz odpowiedniej wersji Angulerjs. której wersji używasz? spróbuj z 1.3

Źródło

2015-10-06 09:48:20 Nir

AngularJS v1.4.6 – Yulian

Próbowałem z 1.3.8, ten sam kod działa idealnie dla mnie. – Nir

Oto jak to zrobiłem w poprzednim projekcie z niestandardową dyrektywą dotyczącą obsługi zakresu. Używanie niestandardowej dyrektywy z zakresem izolatu w ten sposób jest opcjonalne. Powinno to nadal działać dla ciebie przy użyciu ng-kontrolera - różnica polega na ustawieniu przycisków radiowych w kontrolerze, a nie na html, a następnie renderowaniu przy użyciu 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'} 
     ]; 
    } 
})();

Ciało index.html

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

Źródło

2015-10-06 12:32:50 br3w5

myślę, że nie jesteś jedynym, to jest szalone na ten temat. Obecnie mam ten sam problem.

Pokażę moje obejście:

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

KeyPoint zrozumieć, jest usunięcie danych-toogle = "przyciski" wich dodaje aditional javascript logikę, która powoduje błąd. Następnie ukryj pole wyboru z klasą = "ukryj" na tym samym wejściu, a następnie ustaw stan aktywny "ręcznie" zgodnie z wartością twojego obiektu modelu zabezpieczeń.

Mam nadzieję, że to pomoże !.

Źródło

2016-05-13 20:43:00 Victor

Wiązanie przycisków radiowych nie działa po dodaniu atrybutu przełączania danych w AngularJS + Bootstrap

Odpowiedz

Powiązane problemy