一个AngularJS表单是一组输入型控件的集合。


HTML控件

  HTML输入型标签标包括:

  • input标签
  • select标签
  • button标签
  • textarea标签

HTML表单

  HTML表单将各种HTML控件组合到一起。


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

运行

novalidate是HTML5中新加入的一个属性,表示禁用浏览器默认的验证功能。

代码解释

  ng-app指令定义了AngularJS application。

  ng-controller指令定义了application的控制器。

  ng-model指令将两个input标签绑定到模型的user对象上。

  在控制器formCtrl中,设置了master对象的初始值,并且定义了reset()方法。

  reset()方法将master对象复制给user对象。

  当button被点击时,ng-click指令调用了reset()方法。

  这里,application中并不需要novalidate属性,不过在AngularJS表单中你通常需要使用它来覆盖HTML5自带的验证功能。

AngularJS快速入门指南13:表单的更多相关文章

  1. AngularJS快速入门指南14:数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  2. AngularJS快速入门指南12:模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

  3. AngularJS快速入门指南01:导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. AngularJS快速入门指南19:示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  5. AngularJS快速入门指南16:Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  6. AngularJS快速入门指南04:指令

    AngularJS通过指令将HTML属性进行了扩展. AngularJS指令 AngularJS指令是带有ng-前缀的扩展HTML属性. ng-app指令用来初始化AngularJS applicat ...

  7. AngularJS快速入门指南18:Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  8. AngularJS快速入门指南15:API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  9. AngularJS快速入门指南20:快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

随机推荐

  1. 手机GPS为什么能在室内定位?

      为什么手机在室内也能定位?大部分人知道手机会通过GPS进行定位,其实手机定位系统并不是和我们的RTK完全一样的,因为那样就无法解释为何在室内也能定位了,这里我来科普一下智能手机的那些定位方法.   ...

  2. 通过挂载系统光盘搭建本地yum仓库

    1,配置本地yum源: 把系统光盘挂载到文件夹aaa(aaa为自己创建的文件夹). [root@localhost /]# mount dev/cdrom /aaa 2,修改yum配置文件: yum的 ...

  3. python语言特性及其数据类型

  4. 【九度OJ】题目1061:成绩排序

    题目描述: 有N个学生的数据,将学生数据按成绩高低排序,如果成绩相同则按姓名字符的字母序排序,如果姓名的字母序也相同则按照学生的年龄排序,并输出N个学生排序后的信息. 输入: 测试数据有多组,每组输入 ...

  5. <c:if>标签的使用-流程控制标签

    <c:if>标签必须要有test属性,${ }表达式为ture,则执行body内容;否则不执行. 原始代码: <c:if test="${all == 1}"&g ...

  6. 【react学习笔记】-jsx

    //jsx定义组件 var Divider = React.creatClass({ getIsComplete:function(){ return 'is-complete' }, handleC ...

  7. oracle 读书笔记

    1 动态sql即拼接字符串的sql,使用变量代替具体值,10万条语句可以被hash陈一个SQL_ID,可以只解析一次 for i in 1..100000 loop execute immediate ...

  8. 用sql取出来的list需要处理成map的两种情况

    1. 原生sql: select a.id,a.name from a SQLQuery sqlQuery=this.getSession().createSQLQuery(sb.toString() ...

  9. iOS 笔记

    1. 使用断言NSAssert()调试程序错误 NSAssert()只是一个宏,用于开发阶段调试程序中的Bug,通过为NSAssert()传递条件表达式来断定是否属于Bug,满足条件返回真值,程序继续 ...

  10. JS设计模式初探

    目的:设计模式众多,尝试用博客记录下学到的不同设计模式的优劣,方便以后查阅. 前言:半年前看高程的时候看到设计模式这章,云里雾里,不是看不明白,而是不明白为啥要如此麻烦只为创建一个对象.直到最近完成了 ...