如何在Angular js中提交带有本机操作URL的表单

Question

我需要使用类似jquery的angular js提交一个带有原生动作url的表单，在jquery中我们可以像这样提交表单，下面在Angular js 1.x中的对应代码是什么？我知道在angular js中，大部分表单都是用ajax提交的，但在这里我想提交如下内容

<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input  id="other" type="button" value="Go">
</form>
<script>
$( "#other" ).click(function() {
  $( "#target" ).submit();
});
</script> 

Answer 1

您可以使用ng-submit作为表单，并使用input type="submit"提交它：

<form id="target" name="target" ng-submit="go()" action="destination.html">
  <input type="text" ng-model="form.myInput" required>
  <input  id="other" type="submit" value="Go" ng-disabled="target.$invalid">
</form>

您没有在输入上使用value，您应该使用ng-model将输入链接到您的$scope。由于指令ng-disabled，表单无效，则submit输入被禁用。由于第一个输入为required，因此如果为空，则该按钮将被禁用。您可以了解有关验证器here的更多信息。

下面是一个相应的控制器：

function MyController($scope) {
    $scope.form = {};
    $scope.form.myInput = 'Hello there';

    $scope.go = function(){
        console.log($scope.form);
    }
}

如您所见，我们将ng-model链接到$scope.form.myInput

下面是一个有效的fiddle

Answer 2

<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input  id="other" type="submit" value="Go">
</form>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {  
});
</script> 
</html>

Answer 3

你可以这样做。

<form myform action="destination.html">
  <input type="text" value="Hello there">
  <input  id="other" type="button" value="Go">
</form>

myApp.directive('myform', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr){
          element.find("#other").click(function(){
               element.submit();
           })
    }
  };
});