美文网首页
菜鸡学AngularJS 07 绑定事件 (ng-change

菜鸡学AngularJS 07 绑定事件 (ng-change

作者: 菜鸡 | 来源:发表于2016-07-21 11:36 被阅读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>

    相关文章

      网友评论

          本文标题:菜鸡学AngularJS 07 绑定事件 (ng-change

          本文链接:https://www.haomeiwen.com/subject/bejbjttx.html