Question

所以我有这两种形式。每个都有自己的动作，单独的字段和值，单选按钮和按钮。我想要做的是我想要两个单选按钮和一个按钮。什么是最好的解决方案。

<div class="span6">
      <h2 class="headback" >انتخاب دروازه پرداخت</h2>
      <div class="text-box" style="padding-bottom: 0px">

        <form class="form-inline" method="post" id="PaymentForm" action="https://google.com" style="direction: rtl">
          <input type="hidden" name="amount" value="{{payment.Amount}}"/>
          <input type='hidden' name='paymentId' value='{{payment.InvoiceNumber}}' />
          <input type='hidden' name='revertURL' value='http://test2.happycard.ir/payment/verify' />
          <input type='hidden' name='customerId' value='{{payment.Id}}' />

          <label class="radio">
            <img src="/media/images/images/bank.jpg"/><br/>
            <input type="radio" name="PaymentProvider" id="PaymentProvider" value="4" checked>
          </label>
          <ul style="text-align: right">
            <li>
              <input type="button" value="Proceed" ng-click="SetPrePayment();" class="btn btn-primary">
            </li>
          </ul>
        </form >


    <form class="form-inline" method="post" id="PaymentForm2" action="www.wikipedia.com" style="direction: rtl">
          <input type="hidden" name="pin"         value='5I8bpgGr034AmB38MPQ7'/>
          <input type="hidden" name="Id"            value="{{payment.Id}}"/>
          <input type="hidden" name="OrderId"     value="{{payment.OrderId}}"/>
          <input type="hidden" name="amount"        value="{{payment.Amount}}"/>
          <input type='hidden' name='paymentId'     value='{{payment.InvoiceNumber}}' />
          <?php if(custom_config::$IPGtest==1){ ?>
          <input type='hidden' name='revertURL'   value="<?php echo custom_config::$Test2ParsianRevertUrlHappyBarg; ?>" />
          <?php } elseif(custom_config::$IPGtest==2){ ?>
          <input type='hidden' name='revertURL'   value="<?php echo custom_config::$ParsianRevertUrlHappyBarg; ?>" />
          <?php } ?>

          <label class="radio">
            <img src="/media/images/images/bank.jpg"/><br/>
            <input type="radio" value="parsian" name="bankname" checked>
          </label>

          <ul style="text-align: right">
            <li>
              <input  type="button" ng-click="SetPrePayment2();" value="Proceed" class="btn btn-primary">
            </li>
          </ul>
        </form >        
  </div>
</div>

Spoiler警报，AngularJS用于按钮的操作。我上传了一张照片，向您展示我当前代码的输出。

我想要的是：

这是我的SetPrePayment（）函数的代码。

$scope.SetPrePayment=function(){
      $http.post('/payment/happy_payment_register/',{ 'Amount':$scope.totalPrice,'Item':$scope.item.Id, 'Description':$scope.item.Title, 'Count':$scope.defaultQuantity })
        .success(function(data, status, headers, config) {
          if(data!='Fail')
          {
            $timeout(function() {
              $scope.payment=data;
              timer= $timeout(function(){
                document.getElementById("PaymentForm").submit();
              },10)
            }, 0);
          }
        })
        .error(function(data, status, headers, config) {
          console.log(data)
        });
    };

和SetPrePayment2（）是：

$scope.SetPrePayment=function(){
      $http.post('/payment/happy_payment_register/',{ 'Amount':$scope.totalPrice,'Item':$scope.item.Id, 'Description':$scope.item.Title, 'OrderId':$scope.item.Id, 'Count':$scope.defaultQuantity })
        .success(function(data, status, headers, config) {
          if(data!='Fail')
          {
            $timeout(function() {
              $scope.payment=data;
              timer= $timeout(function(){
                document.getElementById("PaymentForm2").submit();
              },10)
            }, 0);
          }
        })
        .error(function(data, status, headers, config) {
          console.log(data)
        });
    };

Answer 1

您可以使用jquery来解决此问题。

从两个表单中移动您的按钮并为其设置ID。

<button id="myButton">Submit</button>

现在您可以检查jquery中的单选按钮以提交自己的表单。

jQuery示例代码：

$( document ).ready( function() {

    $( '#myButton' ).on( 'click', function() {

        if ( $( '#radio_1' ).is(':checked') ) {

            $( '#form_1' ).submit();
            setPrePayment();


        } else { 

            $( '#form_2' ).submit();
            setPrePayment2();

        }

    });

});

Answer 2

我认为这不需要jQuery。您可以使用ng-if根据用户选择表达式显示表单。

如果您需要有条件地加载模板，您也可以使用ng-include，但ngIf就可以了。

我为每个表单添加了一个控制器，如果您必须在表单中执行许多操作或者希望将它们分开，则只需要一个控制器。但是使用ng-if的相同方法将适用于一个表单控制器。

请查看下面的演示或此jsfiddle。

angular.module('demoApp', [])
	.controller('FormOneController', FormOneController)
	.controller('FormTwoController', FormTwoController)
	.controller('MainController', MainController);

function FormOneController($window) {
    this.submit = function() {
    	$window.alert('hello from form 1');
    }
}

function FormTwoController($window) {
    this.submit = function() {
        $window.alert('hello from form 2');
    }
}

function MainController() {
	var vm = this;
    
   
    vm.hideForms = hideForms;
    vm.forms = getFormObject();
    vm.isFormActive = isFormActive;
    vm.selectForm = selectForm;
    vm.showForm = showForm;
    
    activate();
    
    function activate() {
    	vm.selectedForm = vm.forms[0];
    }
    
    function getFormObject() {
    	return [{
            id: 1,
        	name: 'form1',
            label: 'show form 1',
            visible: false
        }, {
            id: 2,
        	name: 'form2',
            label: 'show form 2',
            visible: false
        }];
    }
    
    function hideForms() {
    	angular.forEach(vm.forms, function(form) {
        	form.visible = false;
        });
        //console.log(vm.forms);
    }
    
    function isFormActive(id) {
    	return vm.selectedForm.id === id && vm.selectedForm.visible
    }
    
    function selectForm(form) {
        hideForms();
    	vm.selectedForm = form;
    }
    
    function showForm() {
    	vm.selectedForm.visible = true;
        //console.log(vm.selectedForm);
    }
    
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="MainController as mainCtrl">
    <label ng-repeat="form in mainCtrl.forms">{{form.name}}
    <input type="radio" name="formSelector" value="form" ng-click="mainCtrl.selectForm(form)" ng-checked="mainCtrl.selectedForm === form"></input></label>
    <button ng-click="mainCtrl.showForm()">show form</button>

    <form ng-if="mainCtrl.isFormActive(1)" ng-controller="FormOneController as formOneCtrl">
            <button ng-click="formOneCtrl.submit()">form1 submit</button>
        </form>

        <form ng-if="mainCtrl.isFormActive(2)" ng-controller="FormTwoController as formTwoCtrl">
            <button ng-click="formTwoCtrl.submit()">form2 submit</button>
        </form>
    
</div>

使用两个单选按钮和一个表单合并两个表单

2 个答案: