AngularJS-5-事件繫結
一、舉例
<html ng-app="lesson" ng-controller="lesson4">
<table>
<thead><th>ID</th><th>姓名</th><th>年齡</th><th>星座</th><th>工作年限</th><th>操作</th></thead>
<tbody>
<tr ng-repeat="x in UserEntityList">
<td>{{$index+1}}</td><td>{{x.Name}}</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.1.1.min.js“></script>
<script>
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>
<button ng-click="Counter = Counter + 1 " >點選</button>
</div>
方法2:
<div>
點選數:<b>{{Counter}}</b>
<button ng-click="CounterClick()" >點選</button>
</div>
$scope.Counter = 0
$scope.CounterClick = function($scope){
$scope.Counter = Counter + 1
}
三、點選顯示隱藏元素
<div>
<p ng-show="ContetnFlag">這裡是文章內容</p>
<button ng-click="HideCounter()">隱藏</button>
</div>
$scope.ContetnFlag = true;
$scope.HideCounter = function(){
$scope.ContetnFlag = !$scope.ContetnFlag;
}
四、元素內容改變事件
<input type="text" ng-change="CounterClick()" ng-model="counterInput" />
$scope.Counter = 0
$scope.CounterClick = function($scope){
$scope.Counter = Counter + 1
}
五、按下按鍵
<input type="text" ng-keypress="CounterClick()" ng-model="counterInput1" />
$scope.Counter = 0
$scope.CounterClick = function($scope){
$scope.Counter = Counter + 1
}
六、提交表單
<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>
$scope.SubmitForm = function(){
var name = $scope.NewName;
var age = $scope.NewAge;
//json
return false
}