菜鸡学AngularJS 07 绑定事件 （ng-change 元素内容改变事件，ng-keypress 键盘事件，ng-submit form表单提交事件）

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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容