angularJS使用

来源：互联网发布：在线seo外链编辑：程序博客网时间：2024/04/26 15:25
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        table{            margin: 100px auto;        }    </style></head><body ng-app="HelloApp"><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.psd"/></td>    </tr>    <tr>        <td></td>        <td><input type="button" ng-click="login()" value="LOGIN"/></td>    </tr>    <tr>        <td></td>        <td>{{message}}</td>    </tr></table><script src="angular/angular.js"></script><script>//    创建一个模块    var  app = angular.module('HelloApp',[]);//    为这个模块创建一个控制器    app.controller('WorldController',['$scope',function($scope){        //数据        $scope.user={           userName:'',            psd:'',            userType:''        };        $scope.message = "请输入用户名";        //行为数据        $scope.login=function(){        // 因为数据的变化时双向的同步，所以界面上的值变化会同步到$scope.user上         console.log($scope.user);            alert($scope.user.userName)        };        // 当user.username发生变化时触发这个函数        $scope.$watch('user.userName',function(now,old){            if(now.length>0){                if(now.length<7){                    $scope.message = "输入的用户名"+$scope.user.userName+"不合法";                }else{                    $scope.message = "用户名正确";                }            }else{                $scope.message = "请输入用户名";            }        });    }])</script></body></html>
阅读全文
0 0