首先从angular.js的目录开始,如下图,知道了我们要学什么,然后再开始有目的的学习与对比。

1、从表达式开始:

ng-app指令初始化一个 AngularJS 应用程序。

ng-init指令初始化应用程序数据。

2、指令

  1. <div ng-app="" ng-init="msgs=[
  2. {name:'张三',sex:'男'},
  3. {name:'李四',sex:'女'},
  4. {name:'王五',sex:'男'}]">
  5. <p>所有对象:</p>
  6. <ul>
  7. <li ng-repeat="x in msgs">
  8. {{ x.name + ', ' + x.sex}}
  9. </li>
  10. </ul>
  11. </div>

                   ng-repeat指令对于集合中(数组中)的每个项会克隆一次 HTML元素。

3、模型

 4、$scope作用域

5、控制器

 6、过滤器

。。。

 7、表单

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <script src="angular.min.js"></script>
  8. </head>
  9. <body>
  10. <div ng-app="myApp" ng-controller="formController">
  11. <form novalidate>
  12. First Name:<br>
  13. <input type="text" ng-model="user.firstName"><br>
  14. Last Name:<br>
  15. <input type="text" ng-model="user.lastName">
  16. <br><br>
  17. <button ng-click="reset()">RESET</button>
  18. </form>
  19. <p>form = {{user}}</p>
  20. <p>master = {{master}}</p>
  21. </div>
  22.  
  23. <script>
  24. var app = angular.module('myApp', []);
  25. app.controller('formController', function ($scope) {
  26. $scope.master = {firstName: "果果", lastName: "糖糖"};
  27. $scope.reset = function() {
  28. $scope.user = angular.copy($scope.master);
  29. };
  30. $scope.reset();
  31. });
  32. </script>
  33. </body>
  34. </html>

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

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

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

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

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

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

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

8、输入验证

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5. <title></title>
  6. <meta charset="utf-8" />
  7. <script src="angular.min.js"></script>
  8. </head>
  9. <body>
  10. <h2>验证demo</h2>
  11. <form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
  12. <p>
  13. 用户名:<br>
  14. <input type="text" name="user" ng-model="user" required>
  15. <span style="color:black" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  16. <span ng-show="myForm.user.$error.required">用户名非空</span>
  17. </span>
  18. </p>
  19.  
  20. <p>
  21. 邮箱:<br>
  22. <input type="email" name="email" ng-model="email" required>
  23. <span style="color:black" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  24. <span ng-show="myForm.email.$error.required">邮箱非空</span>
  25. <span ng-show="myForm.email.$error.email">请输入正确格式的邮箱</span>
  26. </span>
  27. </p>
  28.  
  29. <p>
  30. <input type="submit"ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
  31. </p>
  32. </form>
  33.  
  34. <script>
  35. var app = angular.module('myApp', []);
  36. app.controller('validateCtrl', function($scope) {
  37. $scope.user = '果果';
  38. $scope.email = 'dulalay@163.com';
  39. });
  40. </script>
  41. </body>
  42. </html>

展示如下:

HTML 表单属性novalidate用于禁用浏览器默认的验证。

9、Boostrap

  1. <!DOCTYPE html>
  2. <html>
  3. <link href="bootstrap.min.css" rel="stylesheet" />
  4. <script src="angular.min.js"></script>
  5. <body ng-app="myApp" ng-controller="userCtrl">
  6. <div class="container">
  7. <h3>表格显示Boostrap和Angular.JS的使用</h3>
  8. <table class="table table-striped">
  9. <thead>
  10. <tr>
  11. <th>编辑</th>
  12. <th></th>
  13. <th></th>
  14. </tr>
  15. </thead>
  16. <tbody>
  17. <tr ng-repeat="user in users">
  18. <td>
  19. <button class="btn" ng-click="editUser(user.id)">
  20. <span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;编辑
  21. </button>
  22. </td>
  23. <td>{{ user.fName }}</td>
  24. <td>{{ user.lName }}</td>
  25. </tr>
  26. </tbody>
  27. </table>
  28.  
  29. <hr>
  30. <button class="btn btn-success" ng-click="editUser('new')">
  31. <span class="glyphicon glyphicon-user"></span> 新建用户
  32. </button>
  33. <hr>
  34.  
  35. <h3 ng-show="edit">新建用户</h3>
  36. <h3 ng-hide="edit">编辑用户</h3>
  37.  
  38. <form class="form-horizontal">
  39. <div class="form-group">
  40. <label class="col-sm-2 control-label">名:</label>
  41. <div class="col-sm-10">
  42. <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="请输入您的名">
  43. </div>
  44. </div>
  45. <div class="form-group">
  46. <label class="col-sm-2 control-label">姓:</label>
  47. <div class="col-sm-10">
  48. <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="请输入您的姓">
  49. </div>
  50. </div>
  51. <div class="form-group">
  52. <label class="col-sm-2 control-label">密码:</label>
  53. <div class="col-sm-10">
  54. <input type="password" ng-model="passw1" placeholder="请输入密码">
  55. </div>
  56. </div>
  57. <div class="form-group">
  58. <label class="col-sm-2 control-label">重复密码:</label>
  59. <div class="col-sm-10">
  60. <input type="password" ng-model="passw2" placeholder="请重复输入密码">
  61. </div>
  62. </div>
  63. </form>
  64.  
  65. <hr>
  66. <button class="btn btn-success" ng-disabled="error || incomplete">
  67. <span class="glyphicon glyphicon-save"></span> 保存
  68. </button>
  69. </div>
  70. <script src="angularDemo.js"></script>
  71. </body>
  72. </html>
  1. angular.module('myApp', []).controller('userCtrl', function ($scope) {
  2. $scope.fName = '';
  3. $scope.lName = '';
  4. $scope.passw1 = '';
  5. $scope.passw2 = '';
  6. $scope.users = [
  7. { id: 1, fName: '三', lName: "张" },
  8. { id: 2, fName: '四', lName: "李" },
  9. { id: 3, fName: '五', lName: "王" },
  10. { id: 4, fName: '六', lName: "张" },
  11. { id: 5, fName: '七', lName: "张" },
  12. { id: 6, fName: '八', lName: "张" }
  13. ];
  14. $scope.edit = true;
  15. $scope.error = false;
  16. $scope.incomplete = false;
  17.  
  18. $scope.editUser = function (id) {
  19. //$('.form - horizontal').show();
  20. if (id == 'new') {
  21. $scope.edit = true;
  22. $scope.incomplete = true;
  23. $scope.fName = '';
  24. $scope.lName = '';
  25. } else {
  26. $scope.edit = false;
  27. $scope.fName = $scope.users[id - 1].fName;
  28. $scope.lName = $scope.users[id - 1].lName;
  29. }
  30. };
  31.  
  32. $scope.$watch('passw1', function () { $scope.test(); });
  33. $scope.$watch('passw2', function () { $scope.test(); });
  34. $scope.$watch('fName', function () { $scope.test(); });
  35. $scope.$watch('lName', function () { $scope.test(); });
  36.  
  37. $scope.test = function () {
  38. if ($scope.passw1 !== $scope.passw2) {
  39. $scope.error = true;
  40. } else {
  41. $scope.error = false;
  42. }
  43. $scope.incomplete = false;
  44. if ($scope.edit && (!$scope.fName.length ||!$scope.lName.length ||!$scope.passw1.length || !$scope.passw2.length)) {
  45. $scope.incomplete = true;
  46. }
  47. };
  48.  
  49. });

Angular.js表单以及与Bootatrap的使用的更多相关文章

  1. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  2. angular.js表单验证

    表单验证<AngularJs> 常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type=& ...

  3. angular编写表单验证

    angular编写表单验证 一.整体概述 表单内容如下图,包括常用的用户名.密码.确认密码.手机.邮箱等 整体js代码很少,就一个指令用于写确认密码和密码是否相等.其他 验证都是使用angular自带 ...

  4. 关于angular实现表单的一些问题

    如何用angular实现表单的一些问题?核心步骤大概如下: 创建模型类 创建控制此表单的组件. 创建具有初始表单布局的模板. 使用ngModel双向数据绑定语法把数据属性绑定到每个表单输入控件. 往每 ...

  5. 使用Angular提交表单

    使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载 ...

  6. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  7. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  8. node.js表单——formidable/////z

    node.js表单--formidable   node处理表单请求,需要用到formidable包.安装formidable包的命令如下: npm install formidable 安装pack ...

  9. js表单提交,面向对象

    一.js表单验证之后再提交 1.普通按钮onclick函数调用表单的submit()函数 <input type=button name="submit1" value=&q ...

随机推荐

  1. 更新日志 - 关于 iOS9 设备的安装及其他优化

    新版 fir.im 上线整 3 周了,感谢你们对 fir.im 的关注和支持!无以言表,唯有做更好用的产品给大家.本周我们对新版做了以下的功能更新和 bug 修复: 功能更新 在使用过程中,请注意: ...

  2. Socket原理与编程基础(转)

    一.Socket简介 Socket是进程通讯的一种方式,即调用这个网络库的一些API函数实现分布在不同主机的相关进程之间的数据交换. 几个定义: (1)IP地址:即依照TCP/IP协议分配给本地主机的 ...

  3. C/C++在Java项目、Android和Objective-C三大平台下实现混合编程

    Android和iOS开发都支持C++开发,可以一套代码多平台使用.同时C++难以反编译的特性也可以为Android开发带来代码的保密,另一native特性也可以提高代码的运行效率. 一.为什么使用C ...

  4. Selenium3笔记-WebDriver源码初探

    Selenium3 有哪些变化? 其实相对于与Selenium2,Selenium3没有做太多的改动.下面给出官方的文档说明,供参考. 参考文档:https://seleniumhq.wordpres ...

  5. openCV_java Canny边缘检测

    边缘检测的原理: 检测出图像中所有灰度值变化较大的点,而且这些点连起来构成若干线条,这些线条就称之为图像的边缘. 1986年,由John F. Canny 提出! // Canny(Mat image ...

  6. 基于Qt的遥感图像处理软件设计总结

     开发工具 VS2008+Qt4.8.0+GDAL1.9  要点 接口要独立,软件平台与算法模块独立,平台中各接口设计灵活,修改时容易. 设计软件时一步步来,每个功能逐一实现,某个功能当比较独立时可以 ...

  7. java.lang.IllegalArgumentException: You must not call setTag() on a view Glide is targeting

    将原有项目图片加载框架picasso改为glide,关于picasso和glide文档就自行查阅相关资料 显示 图片 例子 Glide.with(mContext).load(imageUrl).pl ...

  8. JSP中文乱码解决方案

    学习JSP的过程中总会碰到中文乱码问题,有的是post方式提交没问题,用get方式提交有乱码,还有的是部署到tomcat中没问题,在Eclipse中启动tomcat,发现用get方式提交有乱码.产生乱 ...

  9. 移动5年 Android生态系统的演进

    由Google.HTC.Qualcomm联手打造的第一部Android手机G1,开启了移动时代的Andr​​oid纪元(如图1所示),直到现在Android也是唯一能在移动市场上与iOS相抗衡的平台. ...

  10. Android 模拟器检测

    参考链接:https://github.com/MindMac/HideAndroidEmulator 从多个方面识别模拟器1.用户习惯:联系人数量.短信数量.相册里面照片数量.安装的应用2.从IME ...