上一节:
下一节:

  AngularJS 表单

  • input 输入框

    AngularJS 中的表单提供了数据绑定和输入控件的验证。
    input 输入框是HTML输入元素：
    • input 元素
    • select 元素
    • button 元素
    • textarea 元素

  • 数据绑定

    input 输入框通过使用 ng-model 指令提供数据绑定。 
    <input type="text" ng-model="firstname">
    该应用程序现在确实具有一个名为firstname的属性。
    ng-model 指令将 input 输入框绑定到应用程序的其余部分。
    属性firstname可以在控制器中引用： 
    <script>
    var app = angular.module('myApp', []);
      app.controller('formCtrl', function($scope) {
      $scope.firstname = "John";
    });
</script>
    尝试一下
    也可以在应用程序的其他地方引用它： 
    <form>
    First Name: <input type="text" ng-model="firstname">
</form>
<h1>你输入了: {{firstname}}</h1>
    尝试一下

  • Checkbox 复选框

    复选框(checkbox)的值为true或false。将 ng-model 指令应用于复选框，然后在应用程序中使用其值。
    下面示例演示了如果选中此复选框，则显示标题： 
    <form>
   检查以显示标题：
   <input type="checkbox" ng-model="myVar">
</form>
<h1 ng-show="myVar">我是头部标题</h1>
    尝试一下

  • Radio 单选按钮

    使用 ng-model 指令将单选按钮(radio)绑定到您的应用程序。
    具有相同 ng-model 的单选按钮(radio)可以具有不同的值，但仅会使用所选的按钮。
    下面示例演示了根据所选单选按钮(radio)的值显示一些文本： 
    <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>
    尝试一下
    myVar的值将是dogs，tuts或cars。

  • Select 选择框

    使用 ng-model 指令将选择框(select)绑定到您的应用程序。
    ng-model 属性中定义的属性将在选择框(select)中具有所选选项的值。
    下面示例演示了根据所选选项的值显示一些文本： 
    <form>
    选择一个主题：
    <select ng-model="myVar">
        <option value="">
        <option value="dogs">Dogs
        <option value="tuts">Tutorials
        <option value="cars">Cars
    </select>
</form>
    尝试一下
    myVar的值将是dogs，tuts或cars。

  • AngularJS 表单示例

    First Name:
    Last Name:
    form = {{user}} master = {{master}}

  • 示例代码

    <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>
    尝试一下
    novalidate 属性是HTML5中的新增功能。它禁用任何默认的浏览器验证。
    示例说明：
    ng-app 指令定义 AngularJS 应用程序。
    ng-controller 指令定义了应用程序控制器。
    ng-model 指令将两个输入元素绑定到模型中的用户对象。
    formCtrl控制器将初始值设置为主对象，并定义 reset() 方法。
    reset() 方法将用户对象设置为与主对象相等。
    仅当单击按钮时，ng-click 指令才会调用 reset() 方法。
    此应用程序不需要 novalidate 属性，但是通常您将以 AngularJS 形式使用它，以覆盖标准 HTML5 验证。
上一节:
下一节: