AangularJs表单基本用法例子

来源：互联网发布：javascript保留字编辑：程序博客网时间：2024/06/07 05:05
宝宝不说话，安静的发代码。。。
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>表单基本用法例子</title>    <script src="angular.js"></script>    <script>        var app=angular.module("formBasicDemo",[]);        app.controller("fromBasicCtrl",function($scope){            $scope.formInitObj={                UserName:"",                NickName:""            };            $scope.form={};            //下拉框数据           $scope.form.LocationCityList=[               {text:"北京",value:"北京"},               {text:"广州",value:"广州"},               {text:"上海",value:"上海"}           ];            //提交验证            $scope.PostForm=function(){                if($scope.form.UserName==""||$scope.form.UserName==undefined){                    alert("用户名不能为空！");                    return false;                }                console.log($scope.form);                //提交后清空表单数据                $scope.form=angular.copy($scope.formInitObj);                //下拉框数据,提交之后给下拉框重新赋值，不然会没有数据                $scope.form.LocationCityList=[                    {text:"北京",value:"北京"},                    {text:"广州",value:"广州"},                    {text:"上海",value:"上海"}                ];            }        });    </script></head><body ng-app="formBasicDemo" ng-controller="fromBasicCtrl">    <form ng-submit="PostForm()">        <ul>            <li>                <label>用户名：</label><input type="text" ng-model="form.UserName">            </li>            <li>                <label>昵  称：</label><input type="text" ng-model="form.NickName">            </li>            <li>                <label>年  龄：</label><input type="text" ng-model="form.Age">            </li>            <li>                <label>是否已婚：</label><input type="checkbox" ng-model="form.IsMarried">            </li>            <li>                <label>喜爱的动物：</label>                <input type="radio" ng-model="form.LoveAnimal" ng-checked="true" value="dog"/>狗                <input type="radio" ng-model="form.LoveAnimal" value="cat"/>猫            </li>            <li>                <label>居住的城市：</label>                <select ng-model="form.LocationCity" ng-options="obj.text as obj.value for obj in form.LocationCityList">                    <option value="">请选择城市</option>                    <option>上海</option>                    <option>北京</option>                    <option>广州</option>                </select>            </li>            <li>                <input type="submit" value="提交"/>            </li>        </ul>        <ul>            <li>{{form.UserName}}</li>            <li>{{form.NickName}}</li>            <li>{{form.Age}}</li>            <li>{{form.IsMarried}}</li>            <li>{{form.LoveAnimal}}</li>            <li>{{form.LocationCity}}</li>        </ul>    </form></body></html>
0 0