Переключение переключателей радиосвязи не работает, когда атрибут перетаскивания данных добавлен в AngularJS + Bootstrap

Я использую AngularJS вместе с Twitter Bootstrap, и я хочу сделать две кнопки переключателей похожими на обычные кнопки Bootstrap. Я нашел this example на jsFiddle, и после применения его к моему делу все выглядит нормально, но оно работает неправильно.Переключение переключателей радиосвязи не работает, когда атрибут перетаскивания данных добавлен в AngularJS + Bootstrap

Я хочу привязать переключатели к модели в угловом. Кнопка

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

И вот результат, нажав на «No» (радио):: Вот мой код

Итак, модель не связана вовсе. Когда я удалить атрибут данных тумблер из кнопок группы, все работает правильно, но радио-кнопки визуализируются только на верхней части кнопки Bootstrap, как на этой картинке:

Что я должен сделать для того, чтобы есть кнопки Bootstrap, которые выглядят как на первом рисунке, и правильно работают с привязкой модели AngularJS, как и во втором?

источник

2015-10-06 Yulian

Вы пытались установить уникальные идентификаторы для каждого элемента ввода? – br3w5

@ br3w5 - yup, все еще не работает – Yulian

Угловые и Bootstrap не всегда хорошо играют вместе ... https: //angular-ui.github.io/bootstrap/#/buttons предоставляет директиву для реализации переключателей с бутстрапом и angular – br3w5

Кодирование правильное. похоже, что вы не используете правильную версию Angulerjs. какую версию вы используете? попробуйте с 1.3

источник

2015-10-06 09:48:20 Nir

AngularJS v1.4.6 – Yulian

Я пробовал с 1.3.8, тот же код отлично работает для меня. – Nir

Вот как я это сделал в предыдущем проекте с пользовательской директивой для обработки области. Использование настраиваемой директивы с областью выделения таким образом является необязательным. Он должен по-прежнему работать для вас с помощью ng-контроллера - разница заключается в настройке переключателей в контроллере, а не в html, а затем рендеринг с использованием 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'} 
     ]; 
    } 
})();

Тело index.html

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

источник

2015-10-06 12:32:50 br3w5

я думаю, вы не только один это безумие по поводу этой проблемы. В настоящее время у меня такая же проблема.

Позвольте мне показать мой обходной путь:

<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 понять, является удалением данных-Toogle = «кнопка» которым добавляет яваскрипт логика фильма, который вызывает ошибку. Затем спрячьте флажок с классом = «скрыть» на одном и том же входе, а затем установите активное состояние «вручную» в соответствии со значением вашего объекта модели поддержки.

Надеюсь, что это поможет !.

источник

2016-05-13 20:43:00 Victor

Переключение переключателей радиосвязи не работает, когда атрибут перетаскивания данных добавлен в AngularJS + Bootstrap

ответ

Смежные вопросы