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

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

Я хочу привязать переключатели к модели в Angular. Вот мой код:

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

А вот результат нажатия кнопки "Нет" (радио):

введите описание изображения здесь

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

введите описание изображения здесь

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


binding angularjs twitter-bootstrap radio-button buttongroup
person Yulian    schedule 06.10.2015    source источник
comment
Вы пытались установить уникальные идентификаторы для каждого элемента ввода?   -  person br3w5    schedule 06.10.2015
comment
@ br3w5 - да, все еще не работает   -  person Yulian    schedule 06.10.2015
comment
Angular и Bootstrap не всегда хорошо сочетаются друг с другом...angular-ui.github.io /bootstrap/#/buttons предоставляет директиву для реализации радиокнопок с бутстрапом и угловым   -  person br3w5    schedule 06.10.2015
comment
Также этот переключатель stackoverflow.com/questions/19150988/   -  person br3w5    schedule 06.10.2015
comment
Возможный дубликат ng -change,ng-click не работает с data-toggle=buttons, начиная с версии 1.3.0   -  person br3w5    schedule 06.10.2015
comment
Этот ответ должен помочь вам stackoverflow.com/a/27897367/1230663   -  person br3w5    schedule 06.10.2015
comment
@ br3w5 - ты много чего выложил, ха-ха. Я решил пойти по пути angular-ui, потому что я считаю, что это более просто, и я уже использую его в своем проекте. Теперь все работает правильно, поэтому, если вы приведете хороший пример его использования и опубликуете его в качестве ответа, я выберу его как принятый, чтобы он мог помочь и другим людям. :) Спасибо за помощь, чувак   -  person Yulian    schedule 06.10.2015
comment
Да, ха-ха, довольно много ссылок ... Я успешно использовал загрузку angular ui для переключателей, поэтому я опубликую это как ответ   -  person br3w5    schedule 06.10.2015
comment
Хм, на самом деле я не использовал ui-bootstrap для переключателей, где я думал, что сделал, но он работал успешно   -  person br3w5    schedule 06.10.2015

Ответы (3)


arrow_upward
6
arrow_downward

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

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

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

Ключевым моментом для понимания является удаление data-toggle="buttons", которое добавляет дополнительную логику JavaScript, вызывающую ошибку. А затем скройте флажок с class="hide" на том же входе, который затем устанавливает активное состояние «вручную» в соответствии со значением вашего объекта модели поддержки.

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

person Victor    schedule 13.05.2016
comment
только что обнаружил, что эта проблема все еще существует в Angular 6 - удаление переключателя данных исправляет ее - person ozz; 20.12.2018
comment
Как сказал @ozz, эта проблема все еще присутствовала в Angular 6, которую я решил, удалив data-toggle="buttons" и добавив [class.active]="option == 'value'" к меткам. Однако мне не нужно было добавлять class="hide" ни к одному из <input> - person Burhan; 18.01.2019

arrow_upward
1
arrow_downward

Вот как я сделал это в предыдущем проекте с пользовательской директивой для обработки области действия. Использование пользовательской директивы с изолированной областью таким образом необязательно. Он все еще должен работать для вас с использованием ng-controller - разница заключается в настройке переключателей в контроллере, а не в html, а затем в рендеринге с использованием ng-repeat. (рабочий план)

радиус.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>

радиус.директива.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>
person br3w5    schedule 06.10.2015

arrow_upward
0
arrow_downward

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

person Nir    schedule 06.10.2015
comment
я пробовал с 1.3.8, у меня тот же код отлично работает. - person Nir; 06.10.2015