菜鸡学AngularJS 07 绑定事件 （ng-change
2016-07-21 本文已影响2629人
菜鸡
1：ng-change = " 方法名( ) " 当元素内容发生改变，执行方法。
PS：用ng-model = "continput" 获取到元素内容。
PS：当元素内容改变，ng-change = "contClick()" 执行相应的方法函数。
<!doctype html>
<html ng-app = "myapp" ng-controller = "TestController">
<head>
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>
</head>
<body>
<div>
<p>内容：{{cont}}</p>
<input type="text" ng-change = "contClick()" ng-model = "continput"></input>
</div>
</body>
<script>
var app = angular.module('myapp', []);
app.controller('TestController', function($scope) {
$scope.cont = 0;
$scope.contClick = function () {
$scope.cont = $scope.continput;
};
});
</script>
</html>
2：ng-keyprees = "方法名( )" 当元素内容有输入，执行方法。
PS：ng-keyprees会自动判别到是否输入了。
<!doctype html>
<html ng-app = "myapp">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller = "keypressController">
<p>次数：{{keyin}}</p>
<input type = "text" ng-keypress = "keyClick()" ng-model = "keyinput"></input>
</div>
</body>
<script>
var app = angular.module('myapp', []);
app.controller("keypressController", function($scope){
$scope.keyin = 0;
$scope.keyClick = function () {
$scope.keyin = $scope.keyin+1;
};
});
</script>
</html>
3：ng-submit = "方法名( )" 获取到form表单提交的内容。
PS：这个没什么好PS的 就这样吧。
<!doctype html>
<html ng-app = "myapp">
<head>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<form ng-controller = "submitController" ng-submit = "subClick()">
<p>{{sub}}</p>
<input type = "text" ng-model = "subinput"/>
<input type = "submit" value = '提交' ></input>
</form>
</body>
<script>
app.controller("submitController", function($scope){
$scope.sub = '请输入';
$scope.subClick = function () {
$scope.sub = $scope.subinput;
};
});
</script>
</html>
