$scope.$watch 小例子

最新推荐文章于 2020-01-20 12:35:22 发布

python基础教程

最新推荐文章于 2020-01-20 12:35:22 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/stopcpp/article/details/55805802

版权

<!DOCTYPE html>
<html lang="en" ng-app="HelloApp">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <table border="1" ng-controller="WorldController">
            <tr>
                <td>用户名</td>
                <td><input type="text" ng-model="user.username"></td>
            </tr> 
            <tr>
                <td>密码</td>
                <td><input type="password" ng-model="user.password"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" ng-click="login()" value="登录"></td>
            </tr>
            <tr>
                <td></td>
                <td>{{message}}</td>
            </tr>
        </table>
        <script src="bower_components/angular/angular.js"></script>
        <script>
            //创建一个模块
            var app = angular.module('HelloApp',[]);
            //为这个模块创建一个控制器
            app.controller('WorldController',['$scope',function($scope){
                //$scope.username='';
                //$scope.pasword='';
                //数据
                $scope.user = {
                    username:' ',
                    password:''
                };

                //行为数据
                $scope.login = function(){
                    //因为数据的变化是双向的同步，所以界面上的值变化会同步到$scope,user上
                    console.log($scope.user);
                };

                //请输入用户名 输入格式合不合法
                $scope.message = "请输入用户名";
                //$scope.message取决于$scope.user

                //监视模型的变化
                //官方的API中提供了一个$scope.$watch方法

                $scope.$watch('user.username',function(now,old){
                    console.log('now:'+now);
                    if(now){
                        if(now.length<7){
                            $scope.message = '不对';
                        }else{
                            $scope.message= ' ';
                        }
                    }else{
                        $scope.message = '还是不对';
                    }
                },true);

            }]);
        </script>
    </body>
</html>