AngularJS Подтвердить выпадающий список на основе выбора переключателя

Question

AngularJS Подтвердить выпадающий список на основе выбора переключателя

0

Я использую AngularJS и имею форму с четырьмя переключателями. У каждого переключателя есть выпадающие списки, которые необходимо обновить, если выбран переключатель. Я попытался добавить ng-required="radioButton selected. Я хочу отключить кнопку отправки, если выпадающие списки не выбраны в зависимости от выбора текущей кнопки.

<body ng-controller="MainCtrl">
    <form name="schedulingForm" novalidate="">
      <div class="onePaddingBottom">
        <div class="col-md-12">
          <div class="radio col-md-2">
            <input type="radio" name="schedule" ng-change="GetOptions()" ng-model="model.LoadIntervalID" ng-value="1" ng-checked="scheduleType.Checked" />
            First of the Month
          </div>
        </div>
        <div class="col-md-12">
          <div class="radio col-md-3">
            <input type="radio" name="schedule" ng-change="GetOptions()" ng-model="model.LoadIntervalID" ng-value="2" ng-checked="scheduleType.Checked" />
            Every Week on
          </div>
          <div class="col-md-6">
            <select ng-model="model.StartWeekdayChosen" ng-options="weekday.Key as weekday.Value for weekday in model.weekdays" ng-required="model.LoadIntervalID==2"></select>
              Starting Previous
              <select ng-model="model.EndWeekdayChosen" ng-options="weekday.Key as weekday.Value for weekday in model.weekdays" ng-required="model.LoadIntervalID==2"></select>
          </div>
        </div>
        <div class="col-md-12">
          <div class="radio col-md-3">
            <input type="radio" name="schedule" ng-change="GetOptions()" ng-model="model.LoadIntervalID" ng-value="3" ng-checked="scheduleType.Checked" />
            Every Month on the
          </div>
          <div class="col-md-6">
            <select ng-model="model.WeekOfMonth" ng-options="timeOfTheMonth.Key as timeOfTheMonth.Value for timeOfTheMonth in model.timesOfTheMonth" ng-required="model.LoadIntervalID==3"></select>
            <select ng-model="model.WeekDayOfTheMonth" ng-options="weekday.Key as weekday.Value for weekday in model.weekdays" ng-required="model.LoadIntervalID==3"></select>
            of the month
          </div>
        </div>
        <div class="text-center">
          <button class="btn btn-primary" ng-click="setSchedule()" enabled="schedulingForm.$valid">Set Schedule</button>
        </div>
      </div>
    </form>
  </body>

Plnkr

James 01 июль 2015, в 18:39

Источник

Теги:

angularjs

validation

2 ответа

Ещё вопросы

callmekatootie · Answer 1 · 2015-07-01T15-29-00.000Z

Поскольку у вас есть своя логика, чтобы определить, когда кнопка должна быть включена, вам нужно иметь собственную пользовательскую функцию, содержащую эту логику.

Это код, который вам нужен в вашем контроллере:

 var isValid = function (key, source) {
     for (var i = 0; i < source.length; i++) {
         if (source[i].Key === key) {
             return true;
         }
     }

     return false;
 };

 $scope.isDisabled = function () {
     var selection = $scope.model.LoadIntervalID;
     if (selection === 1) {
         return false;
     } else if (selection === 2) {
         return !(isValid($scope.model.StartWeekdayChosen, $scope.model.weekdays) 
                && isValid($scope.model.EndWeekdayChosen, $scope.model.weekdays));
     } else if (selection === 3) {
         return !(isValid($scope.model.WeekDayOfTheMonth, $scope.model.timesOfTheMonth) 
                && isValid($scope.model.WeekOfMonth, $scope.model.weekdays));
     } else {
         return true;
     }
 };

В вашем HTML добавьте директиву ng-disabled для вызова функции, которая решает, должна ли кнопка быть отключена или нет:

<button class="btn btn-primary" ng-click="setSchedule()" enabled="schedulingForm.$valid" data-ng-disabled="isDisabled()">Set Schedule</button>

Рабочий Plunkr

dmullings · Answer 2 · 2015-07-01T15-16-00.000Z

Я считаю, что ваша проверка правильной работы. Вам просто нужно изменить код, используемый для отключения кнопки. Измените enabled атрибут на ng-disabled и он будет отключен, если форма не загрязнена или форма недействительна.

<div class="text-center">
  <button class="btn btn-primary" ng-click="setSchedule()" ng-disabled="!schedulingForm.$dirty || !schedulingForm.$valid">Set Schedule</button>
</div>

Рабочий Plnker: http://plnkr.co/edit/iT7KIbR9gB7s5y7pfRaz?p=preview