$scope.$watch 小例子

来源：互联网发布：js设置隐藏显示编辑：程序博客网时间：2024/06/13 03:15
<!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>
0 0