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)的值为truefalse。将 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的值将是dogstutscars
  • 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的值将是dogstutscars
  • 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 验证。