AngularJS事件绑定的使用详解

时间:2024-01-13 19:26:38

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

1.绑定事件:表达式、事件方法名;

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

3.元素内容改变事件:ng-change;

4.按下按键事件:ng-keypress;

5.提交表单事件:ng-submit;

代码

<!doctype html>

<html ng-app="lesson" ng-controller="lesson5">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>

LESSON 5

</title>

<link rel="stylesheet" type="text/css" href="css/main.css" />

<style>

#content1{padding:16px;}

</style>

</head>

<body>

<div style="margin-bottom:50px;">

<form ng-submit=" SubmitForm() ">

<ul>

<li>姓名:<input ng-model="NewName" /></li>

<li>年龄:<input ng-model="NewAge" /></li>

<li><input type="submit" value="提交" /></li>

</ul>

</form>

</div>

<div style="margin-bottom:50px;">

点击数:<b>{{Counter}}</b>

<input type="text" ng-change="CounterClick()" ng-model="counterInput" /><br/>

<input type="text" ng-keypress="CounterClick()" ng-model="counterInput1" />

<button ng-click=" CounterClick() ">点击</button>

</div>

<div style="margin-bottom:50px;">

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

<button ng-click="HideContent()">隐藏</button>

</div>

<table>

<thead>

<tr>

<th>姓名</th>

<th>年龄</th>

<th>星座</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="x in UserInfoList">

<td>{{x[0]}}</td>

<td>{{x[1]}}</td>

<td>{{x[2]}}</td>

</tr>

</tbody>

</table>

<table style="margin-top:30px;border:1px solid blue;">

<thead>

<tr>

<th>ID</th>

<th>姓名</th>

<th>年龄</th>

<th>星座</th>

<th>工作年限</th>

<th>操作</th>

</tr>

</thead>

<tbody>

<tr ng-repeat="x in UserEntityList | orderBy : [ 'Age','-WorkYear' ] | filter : '座' ">

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

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

<td>{{x.Age}}</td>

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

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

<td><button ng-click="DeleteUser(x.Name)" >删除</button></td>

</tr>

</tbody>

</table>

<script src="scripts/angular-1.4.6.min.js"></script>

<script>

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>

执行结果

AngularJS事件绑定的使用详解

原文链接:http://www.maiziedu.com/wiki/angularjs/event/