AngularJS 表单
-
input 输入框
AngularJS 中的表单提供了数据绑定和输入控件的验证。input 输入框是HTML输入元素:- input 元素
- select 元素
- button 元素
- textarea 元素
-
数据绑定
input 输入框通过使用ng-model
指令提供数据绑定。该应用程序现在确实具有一个名为firstname的属性。ng-model
指令将 input 输入框绑定到应用程序的其余部分。属性firstname可以在控制器中引用:也可以在应用程序的其他地方引用它: -
Checkbox 复选框
复选框(checkbox)的值为true或false。将ng-model
指令应用于复选框,然后在应用程序中使用其值。下面示例演示了如果选中此复选框,则显示标题: -
Radio 单选按钮
使用ng-model
指令将单选按钮(radio)绑定到您的应用程序。具有相同ng-model
的单选按钮(radio)可以具有不同的值,但仅会使用所选的按钮。下面示例演示了根据所选单选按钮(radio)的值显示一些文本:myVar的值将是dogs,tuts或cars。
-
Select 选择框
使用ng-model
指令将选择框(select)绑定到您的应用程序。ng-model
属性中定义的属性将在选择框(select)中具有所选选项的值。下面示例演示了根据所选选项的值显示一些文本:myVar的值将是dogs,tuts或cars。
-
AngularJS 表单示例
First Name:Last Name:form = {{user}} master = {{master}} -
示例代码
novalidate 属性是HTML5中的新增功能。它禁用任何默认的浏览器验证。
示例说明:ng-app
指令定义 AngularJS 应用程序。ng-controller
指令定义了应用程序控制器。ng-model
指令将两个输入元素绑定到模型中的用户对象。formCtrl控制器将初始值设置为主对象,并定义 reset() 方法。reset() 方法将用户对象设置为与主对象相等。仅当单击按钮时,ng-click
指令才会调用 reset() 方法。此应用程序不需要 novalidate 属性,但是通常您将以 AngularJS 形式使用它,以覆盖标准 HTML5 验证。