基于角度js中的单选按钮选择形成动作更改

时间:2016-06-18 06:17:05

标签: javascript jquery html angularjs forms

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

这是代码

 <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来检查函数是否被调用。并且警报正在工作它意味着正在调用函数但是当我点击提交时没有任何事情发生。

1 个答案:

答案 0 :(得分:0)

不完全是你要求的,但它解决了你的问题:

  • 使用formData预先填写表单字段ng-models。
  • 将ng-submit添加到表单
  • 使用该功能发出$ 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
        }
    };

由于使用formData为表单ng-model属性添加前缀,因此您可以在一个对象中包含所有字段,在发出POST请求时可以轻松使用这些字段。