angularJS使用

最新推荐文章于 2019-04-19 10:31:28 发布

lvlemo

最新推荐文章于 2019-04-19 10:31:28 发布

阅读量154

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/lvlemo/article/details/77503530

版权

web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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>