AngularJS Проверьте и получите значение переключателя

Question

Я только начал изучать angular и пытаться реализовать основы c. Я сделал 3 радио-кнопки и соответствующий контроллер для него. То, что я пытаюсь сделать, это проверить, выбран ли переключатель или нет, и получить это выбранное значение и передать его другому контроллеру (это можно сделать после правильного выполнения основ)

Вот мой код:

 <input type="radio" name="prepay" ng-model="radioSelect" value="prepay" ng-click="selectedPaymentType(radioSelect)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
 <input type="radio" name="purchasepower" ng-model="radioSelect" value="purchasepower" ng-click="selectedPaymentType(radioSelect)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
 <input type="radio" name="lease" ng-model="radioSelect" value="lease" ng-click="selectedPaymentType(radioSelect)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<!-- continue button -->
<button class="btn btn-primary btn-md" ng-click="opennext()">Continue</button>

Контроллер:

 $scope.opennext = function() {
}

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

ng-disabled="form.$invalid" 
ng-class="{gray:form.$invalid}"

Или каким-то образом проверить, не выбрана ли тогда радио-кнопка в контроллере:

  if (check if radio picked) {
                      document.getElementById("btnSubmit").disabled = false;
            angular.element($('#btnSubmit')).removeClass("gray");
                     }

Но я не использовал какой-либо тег формы, поэтому этот подход не будет работать.

Answer 1

Вы можете реализовать отключение logi c, просто проверив, имеет ли radioSelect переменная области видимости какое-либо установленное значение или нет, потому что изначально он будет пустым, пока не будет выбран какой-либо переключатель:

ng-disabled="!radioSelect" ng-class="{gray:!radioSelect}"

Рабочая демоверсия:

var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
  $scope.radioSelect = ''  
});

.gray {background-color: #999;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<section ng-app="myApp" ng-controller="AppCtrl">
  <h4>Please select one option:</h4>
  <input type="radio" name="prepay" ng-model="radioSelect" value="prepay" ng-click="selectedPaymentType(radioSelect)" required> Prepay<br/>
  <input type="radio" name="purchasepower" ng-model="radioSelect" value="purchasepower" ng-click="selectedPaymentType(radioSelect)" required> Purchase Power<br/>
  <input type="radio" name="lease" ng-model="radioSelect" value="lease" ng-click="selectedPaymentType(radioSelect)" required> Lease<br/><br/>
  <!-- continue button -->
  <button class="btn btn-primary btn-md" ng-click="opennext()" ng-disabled="!radioSelect" ng-class="{gray:!radioSelect}">Continue</button><br/><br/>
  
  <div ng-if="!!radioSelect"><b>Selected option:</b> {{ radioSelect }}</div>
</section>