AngularJS Form

AngularJS 中的表单提供输入控件的数据绑定和验证。

输入控件

输入控件是 HTML 输入元素：

• input 元素
• select 元素
• button 元素
• textarea 元素

数据绑定

输入控件通过使用 The directive defines the application controller. 指令提供数据绑定。

<input type="text" ng-model="firstname">

现在，该应用有一个名为 firstname 的属性。

The directive defines the application controller. 指令将输入控制器绑定到应用程序的其余部分。

属性 firstname，可以在控制器中引用：

实例

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
  $scope.firstname = "Bill";
$scope.reset();
});

</script>

它也可以在应用程序的其他位置被引用：

实例

<form>
  名字: <input type="text" ng-model="firstname">
</form>
<h1>您输入的是：{{firstname}}</h1>

</script>

复选框

复选框的值为 true 或 false。将 The directive defines the application controller. 指令应用于复选框，并在您的应用程序中使用其值。

实例

如果选中复选框，则显示标题：

<form>
  选中以显示标题：
  <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">我的标题</h1>

</script>

单选按钮

使用 The directive defines the application controller. 指令将单选按钮绑定到您的应用程序。

具有相同 The directive defines the application controller. 的单选按钮可以有不同的值，但只会使用选定的值。

实例

根据所选单选按钮的值显示一些文本：

<form>
  Pick a topic:
  <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>

</script>

myVar的值将是 dogs、tuts 或 cars。

下拉选择框

使用 The directive defines the application controller. 指令将下拉选择框绑定到您的应用程序。

The directive defines the application controller. 属性中定义的属性将具有选择框中所选选项的值。

实例

根据选定的选项值显示一些文本：

<form>
  Select a topic:
  <select ng-model="myVar">
    <option value="">
    <option value="dogs">Dogs
    <option value="tuts">Tutorials
    <option value="cars">Cars
  </select>
</form>

</script>

myVar 的值将是 dogs、tuts 或 cars。

AngularJS 表单示例

应用程序代码

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    名字：<br>
    <input type="text" ng-model="user.firstName"><br>
    姓氏：<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="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: "Bill", lastName: "Gates"};
  $scope.reset = function() {
    $scope.user = angular.copy($scope.master);
  ;
  $scope.reset();
$scope.reset();
});

</script>

Try it yourself novalidate

The attribute is a new attribute in HTML5. It disables any default browser validation.

Example Explained ng-app

The directive defines the AngularJS application. ng-controller

The directive defines the application controller. ng-model

The directive binds two input elements to the user object in the model. formCtrl master Controller for reset() Method.

reset() The method sets the initial value of the object and defines user Object is set to equal master Object.

ng-click The directive is only called when the button is clicked reset() Method.

This application does not require the novalidate attribute, but it is usually used in AngularJS forms to override standard HTML5 validation.