angular.js写的表单页面，很方便

最新推荐文章于 2022-06-08 18:16:24 发布

鱼非火

最新推荐文章于 2022-06-08 18:16:24 发布

阅读量675

点赞数

分类专栏： angular.js

本文链接：https://blog.csdn.net/chengqianduan/article/details/53675923

版权

angular.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css"/>
</head>
<style type="text/css">
    .content {
        width: 300px;
        height: 300px;
        position: relative;
        /*border:1px solid yellow;*/
    }

    button {
        width: 60%;
        background-color: #2b669a;
        color: white;
    }

    .personal-information {
        margin: 0 auto;
        border: 1px solid red;
    }

    .img {
        margin: 0 auto;
        margin-left: 50px;
    }
</style>
<body ng-app="app">
<div ng-controller="myCtrl" class="content">
    <!--<div class="personal-information">-->
    <fieldset>
        <legend>基本信息</legend>
        <div class="personal-information">
            <form action="#" method="post" name="Form">
                <div class="img">
                    <img width="20%" ng-src="{{user.icon}}" ng-if="user.isShowImg"/><br/>
                </div>
                请输入用户名：<input type="text" placeholder="用户名" ng-model="msg" required/>
                {{msg}}
                <div>
                    <span>性别：</span></spa><input name="sex" type="radio" value="" ng-checked="user.sex=='1'"/>&nbsp;男
                    <input name="sex" type="radio" value="" ng-checked="user.sex=='0'"/>&nbsp;女
                </div>
                职位：<select ng-disabled="1==1">
                <option>web前端工程师</option>
            </select>
                <button ng-disabled="Form.$invalid" type="submit">提交</button>
            </form>
        </div>
    </fieldset>
</div>
</body>
<script type="text/javascript" src="angular1.2.3.js">
</script>
<script type="text/javascript">
    angular.module('app', [])
        .controller('myCtrl', function ($scope, $http) {
            $scope.msg = "";
            $scope.user = {
                msg: '',
                isShowImg: true,
                icon: 'timg.jpg',
                username: '',
                pwd: '',
                zw: '',
                sex: '1',
                aihao: ''
            }
        })
</script>
</html>

鱼非火

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular.js写的表单页面，很方便

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> link rel="stylesheet" type="text/css"/>head>style type="text/css"> .content { width: 300px; height
复制链接

扫一扫