Как требовать btn-radio Angular Кнопка Bootstrap?

Я использую набор кнопок меток bootstrap в качестве переключателей (как указано в документации по загрузке angular здесь - http://angular-ui.github.io/bootstrap/). Они отлично работают. Вопрос только в том, как вы применяете к ним проверку? Как вам нужно выбрать один из них? То же самое происходит с флажками. Любые мысли по этому поводу? Я уверен, что я не единственный, кто это сделает. Ниже приведен фрагмент html/ angular.

<div class="btn-group">
   <label class="btn btn-primary" ng-model="model.accident.vehicle.occupant.isOwner" btn-radio="'YES'">Yes</label>
   <label class="btn btn-primary" ng-model="model.accident.vehicle.occupant.isOwner" btn-radio="'NO'">No</label>
</div>

ОТВЕТЫ

Ответ 1

У меня была аналогичная проблема. Я подготовил следующую работу для меня, чтобы проверить "обязательный" с помощью неконтролируемых переключателей ust bootstrap.

  • предоставляют разные кнопки ng-to-radio для кнопок
  • сохранить одно скрытое поле для фактического ngmodel
  • замена переключателя обновлений ng-model привязывается к скрытому полю ввода и обновляет другую радиокнопку до нулевого значения
  • сохранить требуемую проверку в скрытом поле. Поле скрыто, но отображается мг-сообщение.

в контроллере:

$scope.interacted = function (field) {             return $scope.submitted || (поле "поле". $грязное: ложное);         };

<form name="my_form"
  class="main-form container"
  ng-controller="FormCtrl"
  ng-cloak class="ng-cloak"
  ng-submit="submit()"
  novalidate>

<div class="control-group">
    <div class="col-md-6">
        <div class="btn-group">
            <label class="btn btn-default"
                   name="radioModel"
                   ng-model="data.radioModel1"
                   btn-radio="'No'"
                   uncheckable
                   ng-required="!data.radioModel"
                   ng-change="data.q1 = (data.radioModel1 || null);data.radioModel2=null">No</label>

            <label class="btn btn-default"
                   name="radioModel"
                   ng-model="data.radioModel2"
                   btn-radio="'Yes'"
                   uncheckable
                   ng-required="!data.radioModel"
                   ng-change="data.q1 = (data.radioModel2 || null);data.radioModel1=null">Yes</label>
        </div>
        <input class="form-control"
               type="text"
               name="q1"
               id="input_q1"
               ng-model="data.q1"
               ng-model-options="{ updateOn: 'blur' }"
               ng-keyup="cancel($event)"
               required
               placeholder="First"
               style="display:none" />
        <div class="error-messages" ng-if="interacted(my_form.q1)" ng-messages="my_form.q1.$error">
            <div ng-message="required">Please select answer</div>
            <div ng-messages-include="form-messages"></div>
        </div>
    </div>
    <div class="col-md-6">
        {{data.q1 | json}}
        {{my_form.radioModel.$error | json}}
    </div>
</div>
<input class="form-control" type="submit" />