AngularJS 表单

Posted on 9 月 14, 2026 by jack

一、概述

AngularJS 表单是输入控件的集合
表单控件通过 ng-model 指令实现数据绑定
ng-model 将表单数据绑定到 $scope 上，实现双向数据同步

二、文本框（text input）

基本绑定

<input type="text" ng-model="firstname">Code language: HTML, XML (xml)

var app = angular.module('myApp', []);
app.controller('formCtrl', function ($scope) {
    $scope.firstname = "John";
});Code language: PHP (php)

在应用其他地方使用绑定值

<form>
    First Name: <input type="text" ng-model="firstname">
</form>

<h1>You entered: {{ firstname }}</h1>Code language: HTML, XML (xml)

文本框中输入的内容会实时同步到 $scope.firstname，页面上的 {{ firstname }} 也会自动更新。

三、复选框（checkbox）

复选框绑定后的值为 true 或 false
可用于控制元素的显示/隐藏

<form>
    Check to show a header:
    <input type="checkbox" ng-model="myVar">
</form>

<h1 ng-show="myVar">My Header</h1>Code language: HTML, XML (xml)

勾选时 myVar 为 true，标题显示；取消勾选时为 false，标题隐藏。

四、单选按钮（radio）

多个单选按钮使用同一个 ng-model
每个按钮设置不同的 value
只有被选中的按钮的值会被绑定到 $scope 变量

<body ng-app="">

    <form>
        选择一个选项:
        <input type="radio" ng-model="myVar" value="dogs">Dogs
        <input type="radio" ng-model="myVar" value="tuts">Tutorials
        <input type="radio" ng-model="myVar" value="cars">Cars
    </form>

    <div ng-switch="myVar">
        <div ng-switch-when="dogs">
            <h1>Dogs</h1>
            <p>Welcome to a world of dogs.</p>
        </div>
        <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
            <p>Learn from examples.</p>
        </div>
        <div ng-switch-when="cars">
            <h1>Cars</h1>
            <p>Read about cars.</p>
        </div>
    </div>

    <p>ng-switch 指令根据单选按钮的选择结果显示或隐藏 HTML 区域。</p>

</body>Code language: HTML, XML (xml)

ng-switch 根据 myVar 的值切换显示对应的 <div> 区域。

五、下拉菜单（select）

使用 ng-model 将下拉菜单绑定到应用
ng-model 的值为当前选中的 <option> 的 value

<body ng-app="">

    <form>
        选择一个选项:
        <select ng-model="myVar">
            <option value=""></option>
            <option value="dogs">Dogs</option>
            <option value="tuts">Tutorials</option>
            <option value="cars">Cars</option>
        </select>
    </form>

    <div ng-switch="myVar">
        <div ng-switch-when="dogs">
            <h1>Dogs</h1>
            <p>Welcome to a world of dogs.</p>
        </div>
        <div ng-switch-when="tuts">
            <h1>Tutorials</h1>
            <p>Learn from examples.</p>
        </div>
        <div ng-switch-when="cars">
            <h1>Cars</h1>
            <p>Read about cars.</p>
        </div>
    </div>

    <p>ng-switch 指令根据下拉菜单的选择结果显示或隐藏 HTML 区域。</p>

</body>Code language: HTML, XML (xml)

六、完整表单实例

<div ng-app="myApp" ng-controller="formCtrl">
    <form novalidate>
        First Name:<br>
        <input type="text" ng-model="user.firstName"><br>
        Last Name:<br>
        <input type="text" ng-model="user.lastName">
        <br><br>
        <button ng-click="reset()">RESET</button>
    </form>

    <p>form = {{ user }}</p>
    <p>master = {{ master }}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('formCtrl', function ($scope) {
        $scope.master = { firstName: "John", lastName: "Doe" };

        $scope.reset = function () {
            $scope.user = angular.copy($scope.master);
        };

        $scope.reset();   // 初始化
    });
</script>Code language: HTML, XML (xml)

说明

要点	说明
`novalidate`	禁用浏览器默认的表单验证，使用 AngularJS 验证
`ng-model="user.firstName"`	绑定到 `$scope.user` 对象的属性
`angular.copy()`	深拷贝对象，避免引用同一内存地址
`reset()`	点击按钮或初始化时将表单重置为 `master` 的值

七、总结

表单控件	ng-model 绑定值
文本框	输入的字符串
复选框	`true` / `false`
单选按钮	被选中的 `value` 值
下拉菜单	被选中的 `<option>` 的 `value`

Previous: AngularJS 模块

Next: AngularJS 输入验证

Posted in AngularJS

发表回复取消回复