使用可选参数POST-method + angularJS发送表单

时间:2018-02-28 06:18:54

标签: javascript html angularjs

我试图制作一个表格,发送一个类型为/:id /:的网址,我在输入表单之前就知道了id,但是option-attribute是用户从收音机中选择的那个-纽扣。提交表单后,我应该转到页面/:id /:选项。我也在申请时使用angulasJS。

那么如何使用POST方法发送url?

HTML

<form method="POST">
    <div class="voteOptions" ng-repeat="item in id.data.options">
      <label class="radioButtons">{{item.title}} votes:{{item.votes}}
        <input type="radio" name="option" value={{item.option}}>
        <span class="radioSelector"></span>
      </label>
    </div>
    <input type="submit" id="voteSubmit" value="Vote!">
  </form>

.POST呼叫

app.post('/:id/:option', (req, res) => {
  var poll = polls[req.params.id-1];
  poll.options[req.params.option-1].votes++;
  res.json(poll);
});

1 个答案:

答案 0 :(得分:1)

创建Controller并从那里进行Http调用。

&#13;
&#13;
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<form method="POST" ng-submit="submit()">
    <div class="voteOptions" ng-repeat="item in options">
      <label class="radioButtons">{{item.title}} votes:{{item.votes}}
        <input type="radio" name="option" value={{item.option}} ng-model="option.val">
        <span class="radioSelector"></span>
      </label>
    </div>
    <input type="submit" id="voteSubmit" value="Vote!">
  </form>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope,$http) {
    var id = 12345;
	$scope.option = {val:0};
	$scope.options= [{
    	title : 'option-1',
        votes : 5,
        option : 1
    },{
    	title : 'option-2',
        votes : 5,
        option : 2
    }];
    
    $scope.submit = function(){
    	console.log('Url', `<domain>/${id}/${$scope.option.val}`);
        // Generate url and call http post
         // $http.post(url, body, config)
        //  .success(function (data, status, headers, config) {
        //  })
        //     .error(function (data, status, header, config) {
        //     });
    }
});
</script>

</body>
</html>
&#13;
&#13;
&#13;