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

来源：互联网发布：软件项目考核指标编辑：程序博客网时间：2024/05/01 15:43
<!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