angular.js写的表单页面，很方便_angular 一个页面两个表单怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/chengqianduan/article/details/53675923

本文介绍了一个使用AngularJS实现的用户信息输入表单案例，详细展示了如何通过AngularJS来控制表单元素的状态（如显示图片、禁用按钮等），并利用ngModel指令进行双向数据绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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