如何在Angular js中触发'click'事件

时间:2021-11-01 00:00:34

how to migrate the below function of jquery to angular js ?

如何将jquery的以下函数迁移到angular js?

  $( "#foo" ).trigger( "click" );

Problem here is im planning to trigger submit button automatically when user fills some data in our application.

这里的问题是我计划在用户填写我们的应用程序中的某些数据时自动触发提交按钮。

so as im from jquery background ,

所以即时通讯来自jquery背景,

thanks in advance.

提前致谢。

5 个解决方案

#1


1  

Usually you don't submit a form in AngularJS. You send the data using an XHR and get a response in JSON.

通常您不会在AngularJS中提交表单。您使用XHR发送数据并以JSON格式获取响应。

Something like this:

像这样的东西:

VIEW

视图

<form name="myForm" ng-submit="login(credentials)">

  <label>
    Username:
    <input type="text" ng-model="credentials.username" />
  </label>

  <label>
    Password:
    <input type="password" ng-model="credentials.password" />
  </label>

 <button type="submit">Login</button>

</form>

CONTROLLER

CONTROLLER

$scope.credentials = {};
$scope.login = function login(credentials) {
  var user = credentials.username;
  var pass = credentials.password;

  // Do some data validation
  if (!user || !pass) {
    $window.alert('Please, enter a username and a password!');
    return;
  }

  // Send the data and parse the response
  // (usually done via a Service)
  LoginService.login(user, pass);
};

See, also, this short demo.

另见这个简短的演示。

#2


14  

$scope.triggerClick = function () {
  $timeout(function() {
    angular.element('#foo').trigger('click');
  }, 100);
};

The $timeout will run an $apply to the cycle if necessary.

如果需要,$ timeout将对循环运行$。

#3


7  

$timeout(function() {
    angular.element(domElement).triggerHandler('click');
}, 0);

The $timeout is for breaking angular's $apply cycle.

$ timeout用于打破angular $的应用周期。

#4


-1  

Instead of that, you could use ng-change and call the submit function from your controller. Something like this:

而不是那样,你可以使用ng-change并从你的控制器调用提交功能。像这样的东西:

<input type="text" ng-model="userData.field1" ng-change="mySubmitFunction(userData)">

#5


-2  

If you f.eks have a button you need to use ng-click="myFunctionName()" on the button itself.

如果你有一个按钮,你需要在按钮本身上使用ng-click =“myFunctionName()”。

And in the script file you use myFunctionName = $scope.function(){ yourCode... }

在脚本文件中,您使用myFunctionName = $ scope.function(){yourCode ...}

If you care completely new to Angular... you should read up a bit on it, since it basically stays away from the DOM, takes "control" over your webpage, and needs ng-app, ng-controller and uses $scope to hold states for content and data.

如果你非常关心Angular ...你应该读一下它,因为它基本上远离DOM,对你的网页进行“控制”,并且需要ng-app,ng-controller并使用$ scope来保留内容和数据的状态。

#1


1  

Usually you don't submit a form in AngularJS. You send the data using an XHR and get a response in JSON.

通常您不会在AngularJS中提交表单。您使用XHR发送数据并以JSON格式获取响应。

Something like this:

像这样的东西:

VIEW

视图

<form name="myForm" ng-submit="login(credentials)">

  <label>
    Username:
    <input type="text" ng-model="credentials.username" />
  </label>

  <label>
    Password:
    <input type="password" ng-model="credentials.password" />
  </label>

 <button type="submit">Login</button>

</form>

CONTROLLER

CONTROLLER

$scope.credentials = {};
$scope.login = function login(credentials) {
  var user = credentials.username;
  var pass = credentials.password;

  // Do some data validation
  if (!user || !pass) {
    $window.alert('Please, enter a username and a password!');
    return;
  }

  // Send the data and parse the response
  // (usually done via a Service)
  LoginService.login(user, pass);
};

See, also, this short demo.

另见这个简短的演示。

#2


14  

$scope.triggerClick = function () {
  $timeout(function() {
    angular.element('#foo').trigger('click');
  }, 100);
};

The $timeout will run an $apply to the cycle if necessary.

如果需要,$ timeout将对循环运行$。

#3


7  

$timeout(function() {
    angular.element(domElement).triggerHandler('click');
}, 0);

The $timeout is for breaking angular's $apply cycle.

$ timeout用于打破angular $的应用周期。

#4


-1  

Instead of that, you could use ng-change and call the submit function from your controller. Something like this:

而不是那样,你可以使用ng-change并从你的控制器调用提交功能。像这样的东西:

<input type="text" ng-model="userData.field1" ng-change="mySubmitFunction(userData)">

#5


-2  

If you f.eks have a button you need to use ng-click="myFunctionName()" on the button itself.

如果你有一个按钮,你需要在按钮本身上使用ng-click =“myFunctionName()”。

And in the script file you use myFunctionName = $scope.function(){ yourCode... }

在脚本文件中,您使用myFunctionName = $ scope.function(){yourCode ...}

If you care completely new to Angular... you should read up a bit on it, since it basically stays away from the DOM, takes "control" over your webpage, and needs ng-app, ng-controller and uses $scope to hold states for content and data.

如果你非常关心Angular ...你应该读一下它,因为它基本上远离DOM,对你的网页进行“控制”,并且需要ng-app,ng-controller并使用$ scope来保留内容和数据的状态。