zoukankan      html  css  js  c++  java
  • AngularJS:表单

    ylbtech-AngularJS:表单
    1.返回顶部
    1、

    AngularJS 表单


    AngularJS 表单是输入控件的集合


    HTML 控件

    以下 HTML input 元素被称为 HTML 控件:

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

    数据绑定

    Input 控件使用 ng-model 指令来实现数据绑定。

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

    通过以上代码应用有了一个名为 firstname 的属性。

    它通过 ng-model 指令来绑定到你的应用。

    firstname 属性可以在 controller 中使用:

    实例

    var app = angular.module('myApp', []);
    app.controller('formCtrl', function($scope) {
        $scope.firstname = "John";
    });

     尝试一下 »

    也可以在应用的其他地方使用:

    实例

    <form>
    First Name: <input type="text" ng-model="firstname">
    </form>
     
    <h1>You entered: {{firstname}}</h1>
    尝试一下 »

    Checkbox(复选框)

    checkbox 的值为 true 或 false,可以使用 ng-model 指令绑定,它的值可以用于应用中:

    实例

    复选框选中后显示 h1 标签内容:

    <form>
        Check to show a header:
        <input type="checkbox" ng-model="myVar">
    </form>
     
    <h1 ng-show="myVar">My Header</h1>
    尝试一下 »

    单选框

    我们可以使用 ng-model 来绑定单选按钮到你的应用中。

    单选框使用同一个 ng-model ,可以有不同的值,但只有被选中的单选按钮的值会被使用。

    实例

    根据选中的单选按钮,显示信息:

    <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。


    下拉菜单

    使用 ng-model 指令可以将下拉菜单绑定到你的应用中。

    ng-model 属性的值为你在下拉菜单选中的选项:

    实例

    根据选中的下拉菜单选项,显示信息:

    <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。

    HTML 表单

    HTML 表单通常与 HTML 控件同时存在。


    AngularJS 表单实例

    First Name:

    Last Name:
     

    form = {"firstName":"John","lastName":"Doe"}

    master = {"firstName":"John","lastName":"Doe"}


    应用程序代码

    <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>

     尝试一下 »

    Note novalidate 属性是在 HTML5 中新增的。禁用了使用浏览器的默认验证。

    实例解析

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

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

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

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

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

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

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

    2、
    2.返回顶部
     
    3.返回顶部
     
    4.返回顶部
     
    5.返回顶部
    1、
    2、 
    6.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    (引)spring学习笔记1.什么是控制反转
    Arduino 各种模块篇 步进电机 step motor 舵机 servo 直流电机 总复习
    Raspberry Pi Wireless Adaptor
    Pyramid 使用总结1
    Arduino 各种模块篇 人体红外感应模块 proximity sensor
    Pyramid 使用总结2
    Webcam Streaming Desktop Recording on Linux for ubuntu or its destros
    Arduino 各种模块篇 步进电机 step motor( 不用库,不用shield, 纯)
    Arduino 各种模块篇 motor shield 电机扩展板(舵机、直流电机、步进电机party)
    转载 stepper motors
  • 原文地址:https://www.cnblogs.com/storebook/p/8547340.html
Copyright © 2011-2022 走看看