代码之家 › 专栏 › 技术社区 › Sherin Green

如何在js-like-j查询中通过点击按钮提交带有本机操作URL的表单

forms angularjs javascript

0

Sherin Green · 技术社区 · 7 年前

在jquery中,我们可以提交这样的表单,在AngularJS1.x中,下面的等效代码是什么?我知道在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>

3 回复 | 直到 7 年前

1

0

Groben 7 年前

你可以用 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 submit 输入被禁用。由于指令,窗体无效 ng-disabled . 因为第一个输入是 required here .

下面是相应的控制器:

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

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

如你所见,我们 ng模型 链接到 $scope.form.myInput

这是一张工作票 fiddle

2

0

Mukund Thakkar 7 年前

<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>

3

-1

saiyan 7 年前

<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();
           })
    }
  };
});