基于angular js中的单选按钮选择的表单操作更改

Question

现在我有了一个表单和两个单选按钮。根据选择的单选按钮，我必须更改表单操作。

以下是代码

 <form action={{action}} name="payform" method="post">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="cash" ng-click="paymethod('cash')" name="payment" value="cash">Cash
</label>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="form-group">
<div class="radio radio-text">
<label>
<input type="radio" ng-model="online" ng-click="paymethod('online')" name="payment" value="online">Online
</label>
</div>
</div>


<button class="btn btn-success" name="submit" type="submit">Submit</button>
</form>

下面是控制器代码

$scope.paymethod = function(ptype){
alert("hi");
if(ptype=="cash"){
$scope.action = "food.php";
}
else if(ptype=="online"){
$scope.action = "online.php";
}
}

我在函数中使用alert来检查函数是否正在被调用。并且alert正在工作，这意味着函数正在被调用，但当我单击submit时，什么也没有发生。

Answer 1

不完全是你想要的，但它解决了你的问题：

• 使用formData为表单字段添加ng-models。
• Add ng-submit to your form
• 使用该函数发出$http请求

非常基本的例子：

HTML：

<form name="payform" ng-submit="submitForm()">
     <input ng-model="formData.value1" />
     <input ng-model="formData.value2" />
     <button type="submit"></submit>
</form>

JS：

$scope.submitForm = function submitForm() {
    $http.post($scope.ptype + '.php', $scope.formData).then(
        function success(response) {
             // do something
        },
        function error(response) {
             // not good
        }
    };

因为表单ng-model属性的前缀是formData，所以所有字段都包含在一个对象中，在发出POST请求时可以很容易地使用该对象。