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

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

forms angularjs javascript

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

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

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>

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

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

8 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

8 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

8 年前