AngularJS-5-事件绑定

来源：互联网发布：弘化社淘宝官方流通处编辑：程序博客网时间：2024/05/01 10:30

一、举例

<table>

<tbody>

<td>{{$index+1}}</td><td>{{x.Name}}</td><td>{{x.Age}}</td><td>{{x.Constellation}}</td><td>{{x.WorkYear}}</td>

</tr>

</tbody>

</table>

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

app.controller("lesson4",function($scope){

$scope.UserEntityList=[

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

{'Name':'Jerry','Age':27,'Constellation':''巨蟹座','WorkYear':5},

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

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

]

$scope.DeleteUser = functoin(userName){

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

if(user.Name == userName){

list.splice(i,1);

}

})

}

})

</script>

二、计时器

方法1：

<div>

点击数：<b>{{Counter || 0}}</b>

</div>

方法2：

<div>

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

</div>

$scope.Counter = 0

$scope.CounterClick = function($scope){

$scope.Counter = Counter + 1

}

三、点击显示隐藏元素

<div>

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

</div>

$scope.ContetnFlag = true;

$scope.HideCounter = function(){

$scope.ContetnFlag = !$scope.ContetnFlag;

}

四、元素内容改变事件

$scope.Counter = 0

$scope.CounterClick = function($scope){

$scope.Counter = Counter + 1

}

五、按下按键

$scope.Counter = 0

$scope.CounterClick = function($scope){

$scope.Counter = Counter + 1

}

六、提交表单

<ul>

</ul>

</form>

$scope.SubmitForm = function(){

var name = $scope.NewName;

var age = $scope.NewAge;

//json

return false

}

阅读全文

0 0