AngularJS事件绑定的使用详解

叁歲伎倆 2022-07-14 02:49 175阅读 0赞

本文和大家分享的主要是AngularJS中事件绑定相关知识点，希望通过本文的分享，对大家学习和使用AngularJS有所帮助。

1.绑定事件：表达式、事件方法名；

2.绑定点击事件实例：显示、隐藏页面元素；

3.元素内容改变事件：ng-change；

4.按下按键事件：ng-keypress；

5.提交表单事件：ng-submit；

代码

<!doctype html>

<head>

<title>

LESSON 5

</title>

<style>

\#content1\{padding:16px;\}

</style>

</head>

<body>

<ul>

</ul>

</form>

</div>

点击数：<b>\{ \{Counter\}\}</b>

</div>

<p ng-show="ContentFlag">这里是文章内容</p>

</div>

<table>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tr>

</tbody>

</table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<td>\{ \{$index+1\}\}</td>

<td>\{ \{x.Name | uppercase\}\}</td>

<td>\{ \{x.Constellation\}\}</td>

<td>\{ \{x.WorkYear\}\}</td>

</tr>

</tbody>

</table>

var app = angular.module("lesson",\[\]);

app.controller("lesson5",function($scope)\{

$scope.UserNameList = \["Tom","Jerry","David","Tim"\];

$scope.UserEntityList = \[

\{'Name':'Tim','Age':39,'Constellation':'摩羯座','WorkYear':19\},

\{'Name':'Tom','Age':26,'Constellation':'水瓶座','WorkYear':39\},

\{'Name':'David','Age':28,'Constellation':'天秤座','WorkYear':7\},

\{'Name':'Jerry','Age':26,'Constellation':'巨蟹座','WorkYear':139\}

\];

$scope.UserInfoList =\[

\["Tom",26,"水瓶座"\],

\["Jerry",27,"巨蟹座"\],

\["David",28,"天秤座"\],

\["Tim",39,"摩羯座"\]

\];

$scope.DeleteUser = function(userName)\{

$scope.UserEntityList.forEach(function(user,i,list)\{

if(user.Name==userName)\{

list.splice(i,1);

\})

$scope.Counter = 0;

$scope.CounterClick= function()\{

$scope.Counter=$scope.Counter+1;

$scope.ContentFlag = true;

$scope.HideContent = function()\{

$scope.ContentFlag = !$scope.ContentFlag;

$scope.SubmitForm = function()\{

var name = $scope.NewName;

var  age = $scope.NewAge;

console.log(

\{name:name,age:age\}

);

return false;

\});

</script>

</body>

</html>

执行结果

![Center][]

原文链接：[http://www.maiziedu.com/wiki/angularjs/event/][http_www.maiziedu.com_wiki_angularjs_event]

[Center]: /images/20220714/56a2bcaab1d94fbaaae04826f641aedd.png
[http_www.maiziedu.com_wiki_angularjs_event]: http://www.maiziedu.com/wiki/angularjs/event/

AngularJS事件绑定的使用详解

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关详解angularJs指令的3种绑定策略

相关【angularjs】数据绑定

相关 JQuery-事件绑定详解

相关 php 事件绑定,php实现事件绑定

相关 AngularJS入门-数据绑定

相关 AngularJS（2）——AngularJS数据双向绑定

相关 AngularJS事件绑定的使用详解

相关 AngularJS循环绑定相关使用详解

相关 AngularJs数据绑定

相关 Firebase 的 AngularJS 绑定 AngularFire