Question

我需要根据对特定单选按钮的选择来输入所需的特定输入字段。我已经尝试过ng-required，但似乎没有用。

如果要选择型号为ng-model =“ selected_payment_method = CC的付款方式4，我想在电话号码字段中填写

<form ng-submit="proceed_payment()" type="post" name="paymentForm" novalidate>
    <div class="col s12">
        <div class="col s12">
                <input name="payment" ng-model="selected_cc_method" class="with-gap" id="payment4" type="radio"
                       value="CC" ng-click="selected_payment_method = 'CC'"/>
                <label class="fund-project-payment-method-label" for="payment4">CC</label>
            </div>

        </div>
    </div>
    <div class="col s12 shipping-details">

        <div class="fund-project-additional fund-project-personal-details">
            Personal Details
        </div>

        <label for="email" class="fund-project-personal-details-label">Email</label>
        <input placeholder="Email" id="email" type="email" ng-model="email" class="validate" required>
        <!-- 
            Phone Number & Name a required field as well
        -->
        <label for="display_name" class="fund-project-personal-details-label">Name</label>
        <input placeholder="Name" id="display_name" ng-model="name" type="text"
               class="validate" required>

        <label for="phone_number" class="fund-project-personal-details-label">Phone Number</label>
        <input placeholder="Phone Number" id="phone_number" type="text" ng-model="phone_number" ng-required="selected_payment_method === 'CC'">

        <input placeholder="Your message." id="personal_message" ng-model="personal_message" type="text"
               class="validate" maxlength="200">
        <span class="personal-message-text">
            This will be displayed on the campaign page.
        </span>
    </div>
   <div class="col s12 right">
   <button type="submit" class="waves-effect waves-light btn-large orange white-text proceed-payment"
           disabled="selected_payment_method == undefined || paymentForm.$invalid || selected_reward_total_amount == 0">
     Next: Pay
        <i class="fa fa-chevron-right" ng-if="!proccess_payment_spinner"></i>
        <div class="preloader-wrapper small active right payment-loader" ng-if="proccess_payment_spinner">
            <div class="spinner-layer spinner-white-only">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="gap-patch">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
    </button>

这是我为确保付款完成而做的事情。我在做什么不对？

$scope.proceed_payment = function () {
    $scope.proccess_payment_spinner = true;

    if ($scope)

    var payment_method = $('input:radio[name=payment]:checked').val();

    if ($scope.selected_reward_details.limit_reward_amount &&
        parseInt($scope.selected_reward_details.selected_quantity) > parseInt($scope.selected_reward_details.remaining_quantity)) {
        $('#heading').html("Too many rewards!");
        $('#message').html("Unfortunately the amount of rewards you've selected exceeds the number available.");
        $('#error_modal').openModal();
        return;
    }

    if (payment_method === "CC") {
            ProjectPaymentService.initiateCCPayment(
                    $scope.project.id,
                    $scope.selected_reward_details.id,
                    $('#email').val(),
                    $('#display_name').val(),
                    $('#phone_number').val(),
                    $('#personal_message_display_name').val(),
                    $('#personal_message').val(),
                    parseInt($scope.selected_reward_details.selected_quantity),
                    parseFloat($scope.selected_reward_details.custom_amount),
                    parseFloat($scope.selected_reward_details.shipping_fee),
                    parseFloat($scope.selected_reward_details.reward_amount * $scope.selected_reward_details.selected_quantity),
                    parseFloat($scope.selected_reward_total_amount),
                    $('#address_1').val(),
                    $('#address_2').val(),
                    $('#country').val(),
                    $('#postcode').val(),
                    $('#city').val(),
                    $('#region').val()
                ).then(
                    function successHandler(data) {
                        $scope.proccess_payment_spinner = false;

                        var project_funding_id = angular.fromJson(data.data);
                        $location.path("mpesa_details/" + project_funding_id);
                    },
                    function errorHandler(data) {
                        $scope.proccess_payment_spinner = false;
                        console.log(angular.fromJson(data.data));
                    });

Answer 1

无线电类型输入不需要"files.autoSave": "onFocusChange"来设置其值：

ng-click

现在您可以将<input type="radio" name="payment" ng-model="selected_cc_method" class="with-gap" id="payment4" value="CC" />与selected_cc_method一起使用：

ng-required

您可以在此处看到，单击单选按钮时，需要输入电话号码：

DEMO

Answer 2

您正在使用两个变量；

selected_cc_method

和

selected_payment_method

我将放下ng-click并设置收音机的型号，然后将ng-required使用单选按钮值，而不是尝试为此使用另一个变量。

<input name="payment" ng-model="selected_payment_method" class="with-gap"
       id="payment4" type="radio" value="CC"/>
<label class="fund-project-payment-method-label" for="payment4">CC</label> 


<input placeholder="Phone Number" id="phone_number" type="text"
       ng-model="phone_number"
       ng-required="selected_payment_method === 'CC'">

单击特定的单选按钮时需要输入

2 个答案: