zoukankan      html  css  js  c++  java
  • AngularJS(9)-表单

    AngularJS 表单是输入控件的集合

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表单</title>
        <script src="angular-1.4.1/angular.min.js"></script>
    </head>
    <body>
    <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>
    </body>
    </html>
    

    赋值时候是这样的: 

     

    点击RESET之后:

    说明:

    ng-app 指令定义了 AngularJS 应用。

    ng-controller 指令定义了应用控制器。

    ng-model 指令绑定了两个 input 元素到模型的 user 对象。

    formCtrl 函数设置了 master 对象的初始值,并定义了 reset() 方法。

    reset() 方法设置了 user 对象等于 master 对象。

    ng-click 指令调用了 reset() 方法,且在点击按钮时调用。

    novalidate 属性在应用中不是必须的,但是你需要在 AngularJS 表单中使用,用于重写标准的 HTML5 验证。

  • 相关阅读:
    基于jQuery的上下无缝滚动应用(单行或多行)
    表单验证
    中国剩余定理 ( 的学习 )
    扩展欧几里德算法--学习笔记
    Vijos P1794 文化之旅
    1336 : Matrix Sum (hihocoder)
    nyoj 1030 hihocoder 1338
    多重邻接表
    图的存储 ( 十字链表 )
    01背包的变形
  • 原文地址:https://www.cnblogs.com/yk123/p/5916514.html
Copyright © 2011-2022 走看看