AngularJS学习之旅—AngularJS 表单(十六)

时间:2022-12-15 21:24:12

一、AngularJS 表单
  AngularJS 表单是输入控件的集合。
  HTML 控件
    以下 HTML input 元素被称为 HTML 控件:
    input 元素
    select 元素
    button 元素
    textarea 元素

  1、数据绑定

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

  

  2、Checkbox(复选框)

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

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

  3、单选框 

    我们可以使用 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>

  4、下拉菜单

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

  5、AngularJS 表单实例

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

AngularJS学习之旅—AngularJS 表单(十六)的更多相关文章

  1. AngularJS学习之旅—AngularJS 模块&lpar;十五&rpar;

    一.AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 1.创建模块 通过 AngularJS 的 angular ...

  2. AngularJS学习之旅—AngularJS 模型&lpar;四&rpar;

    1.AngularJS ng-model 指令 1.ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值. 2.ng-model 指令可 ...

  3. AngularJS学习之旅—AngularJS 指令&lpar;三&rpar;

    1.AngularJS 指令 AngularJS 通过被称为 指令 的新属性来扩展 HTML. AngularJS 通过内置的指令来为应用添加功能. AngularJS 允许你自定义指令.2.Angu ...

  4. AngularJS学习之旅—AngularJS 控制器&lpar;六&rpar;

    1.AngularJS 控制器 AngularJS 应用程序被控制器控制. ng-controller 指令定义了应用程序控制器. 控制器是 JavaScript 对象,由标准的 JavaScript ...

  5. AngularJS学习之旅—AngularJS 表达式&lpar;二&rpar;

    1.AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑定到 HTML,这与 ng-bind 指令有异曲同工之妙 ...

  6. AngularJS学习之旅—AngularJS 事件&lpar;十四&rpar;

    1.AngularJS 事件 ng-click ( 适用标签 :所有,触发事件:单击): ng-dblclick( 适用标签 :所有,触发事件:双击): ng-blur(适用标签 : a,input, ...

  7. AngularJS学习之旅—AngularJS Select&lpar;十&rpar;

    1.AngularJS Select(选择框) AngularJS 可以使用数组或对象创建一个下拉列表选项. ng-option:创建一个下拉列表,列表项通过对象和数组循环输出 eg: <div ...

  8. AngularJS学习之旅—AngularJS SQL&lpar;十二&rpar;

    一.使用 PHP 从 MySQL 中获取数据 <div ng-app="myApp" ng-controller="customersCtrl"> ...

  9. AngularJS学习之旅—AngularJS HTML DOM&lpar;十三&rpar;

    1.AngularJS HTML DOM AngularJS 为 HTML DOM 元素的属性提供了绑定应用数据的指令. ng-disabled 指令:ng-disabled 指令直接绑定应用程序数据 ...

随机推荐

  1. HDFS的概念

    1.数据块 每个磁盘都有默认的数据块大小,这是磁盘进行数据读/写的最小单位.构建于单个磁盘之上的文件系统通过磁盘块来管理该文件系统中的块,该文件系统块的大小可以是磁盘块的整数倍.文件系统快一半为几千字 ...

  2. RealtekRTL8111内建网卡-黑苹果之路

    真是服了这神一样的黑苹果.好不容易配好显卡,登陆appstore却报“无法验证您的设备或电脑”,查了一圈,又说要配网卡为en0的,有说要在clover中配FIXLAN的,最准确的是网卡必须是内建(Bu ...

  3. UITableVIew 滚动流畅性优化

    影响UITableViewUITableView滚动的流畅性原因: 1. 在代理方法中做了过多的计算占用了 UI 线程的时间 2.同上 3.Cell 中 view 的组织复杂,比如使用layer并不会 ...

  4. Silverlight项目笔记3&colon;Silverlight RIA Services缓存引发的问题

     问题描述:使用Silverlight的RIA Services进行数据库更新操作,重复提交时发现异常,SubmitOperation发生错误,提示实体类冲突,检查发现之前删除的数据竟然还存在(数据库 ...

  5. hive中简单介绍分区表

    所介绍内容基本上是翻译官方文档,比较肤浅,如有错误,请指正! hive中创建分区表没有什么复杂的分区类型(范围分区.列表分区.hash分区.混合分区等).分区列也不是表中的一个实际的字段,而是一个或者 ...

  6. Android开发调试日志工具类&lbrack;支持保存到SD卡&rsqb;

    直接上代码: package com.example.callstatus; import java.io.File; import java.io.FileWriter; import java.i ...

  7. 模拟摇奖:从1-36中随机抽出8个不重复的数字(math)

    public class Yaojiang { public static void main(String[] args) { // TODO 自动生成的方法存根 int[] a=new int[8 ...

  8. mysql5&period;7版本开始创建用户需要create user

    mysql5.7版本开始创建用户需要create user 5.7版本之后,直接使用:grant select on MySQL.test01 to hug@localhost; 是不行的,会报错: ...

  9. html中头meta信息

    一.页面关键字 网站关键字:用户通过搜索引擎能搜到该网站的词汇.最好控制在10个以内. 基本语法: <meta name="keywords" content="具 ...

  10. 【转载】SpringBoot系列——Swagger2

    微服务学习二:springboot与swagger2的集成:https://www.cnblogs.com/fengli9998/p/7522973.html 注:需要在启动类加 @EnableSwa ...