AangularJs表单基本用法例子_combing form举例子-优快云博客

本文链接：https://blog.youkuaiyun.com/cherishSpring/article/details/51385619

本文介绍了一个使用AngularJS实现的基本表单示例，包括文本输入、复选框、单选按钮、下拉选择等元素，并展示了如何进行简单的表单验证及数据提交处理。

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

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