当我们在html中声明了ng-app后,form的submit就会失效,必须通过angularJS来处理.如果这时还是想用普通的方式提交的话,需要修改form标签,如下所示: <form method="post" role="form" ng-submit="submit()" action="#"> …. </form> 这样传统的submit方法又可以生效了…

我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-upload class="upload-demo" drag ref="fileUpload" :action="urls.fileUpload" :on-success="handleUploadSuccess" :on-error=…

作用域.控制器.指令 作用域 应用的作用域是和应用的数据模型相关联的,同时作用域也是表达式执行的上下文.$scope对象是定义应用业务逻辑.控制器方法和视图属性的地方. 作用域是应用状态的基础.基于动态绑定,我们可以依赖视图在修改数据时立刻更新$scope,也可以依赖$scope在其发生变化时立刻重新渲染视图. AngularJS将$scope设计成和DOM类似的结构,因此$scope可以进行嵌套,也就是说可以引用父级$scope中的属性. 作用域提供了监视数据模型变化的能力.它允许开发者使用其…

AngularJS提供了一系列内置指令.其中一些指令重载了原生的HTML元素,比如<form>和<a>标签, 当在HTML中使用标签时,并不一定能明确看出是否在使用指令. 其他内置指令通常以ng为前缀,很容易识别.例如后面将介绍的ng-href指令,它会提供一个超链接 ,这个链接将处于禁用状态,直到ng-href="someExpresiion"中的表达式被调用并且返回一个值. 最后,某些内置指令并不会有对应的HTML标签,比如ng-controller,这个指…

产品简介 ESP8266串口WiFi扩展板是深圳四博智联科技有限公司开发的一款基于乐鑫ESP8266的超低功耗的UART-WiFi模块,兼容Arduino UNO.Mega等标准主板,可以方便地进行二次开发,加速产品原型设计. 基于乐鑫ESP8266模块,实现串口转WiFi功能.模块具备以下特点: 1. WiFi采用工业级芯片ESP8266,模块为ESP-12E带金属屏蔽罩,强抗干扰能力: 2. 标准引脚兼容Arduino Uno.Mega2560等主控板,Arduino与UNO连接采用电压转换…

第一章 AngularJs入门 AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率. 1 特点 AngularJS与我们之前学习的jQuery是有一定的区别的. jQuery更准确来说只是一个库,封装了许多函数帮我们完成单独的功能,其核心思想是简化DOM操作时所使用的写法.帮我们做兼容性处理等.我们写代码时,思路还是自己的思路,只不过写法更简便了. AngularJS则一个框架,它帮我们搭建好了开发某类特定应用(…

前言  最近在用Polymer增强form,使其支持表单的异步提交,但发现明明订阅了onsubmit和submit事件,却怎么也触发不了.下面我们将一一道来. 提交表单的方式 表单仅含一个以下的元素时,该元素得到焦点,按回车键,即可发起表单提交. input[type=text] input[type=password] input[type=email] input[type=url] input[type=tel] input[type=number] input[type=search]…

Pleasea refer to Link <form ng-submit="foo()" handle-phone-submit> <input type="text" ng-model="query" name="query" /> <button type="submit">OK</button> </form angular.module('Fo…

 壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于路由配置,除此之外,angularUI也提供了uirouter模块用于解决路由问题,本文将从ngRoute与uirouter两个模块出发,分别介绍两者的路由监听方法.  贰 ❀ ngRoute路由监听 ngRoute提供了路由事件用于监听路由过程中的每个阶段,可以为这些不同的路由事件设置监听器并在路…

指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突. 首先从一些常见的内置指令开始. 先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.…

指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单记录了一些内置指令,先使用起来,再谈一些有趣的东西. 内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.但先…

指令1.指令本质上就是AngularJS拓展具有自定义功能的HTML元素的途径.通过自定义元素来创建指令,如:<my-directive></my-directive>.directive('myDirective',function(){ return{ restrict:'E', replace:true, //此句可不加 template:'<a href="http://baidu.com">clickMe</a>' };});结…

基础ng指令 ng-href ng-src ng-disabled ng-readonly ng-checked ng-selected ng-class ng-style ng-show ng-hide ng-repeat ng-init ng-if ng-bind ng-bind-template ng-cloak ng-model ng-click ng-change ng-submit ng-include 内置指令说明 a.ng-href 使用说明: 当使用当前作用域中的属性动态创建U…

AngularJS处理数据表格 使用 np-repeat 指令 <table> ... <!-- 这里使用ng-repeat指令来重复数据生成表格 --> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td> <td>{{ subject.marks }}</td> </tr> ... </ta…

1. 内置指令(10-12 章) AngularJS 内置超过 50 个内置指令, 包括 数据绑定,表单验证,模板生成,时间处理 和 HTML 操作. 指令暴露了 AngularJS 的核心功能, 如 事件处理,表单验证,模板等. 1.1 数据绑定指令 数据绑定: 使用模型中的值, 并将其插入到 HTML 文档中.所有的数据绑定指令, 都可以当做一个属性或者类使用. 属性 : <span ng-bind="todos.length"></span> 属性可能会导…

说说指令 不得不赞叹,指令是ng最为强大的功能之一,好吧,也可以去掉之一,是最强大的功能.ng内置了许多自定义的指令,这避免了我们自己去造轮子.同时,ng也提供了自定义指令的功能,可以让我们的页面元素标签更加实例化. 内置的指令很多,至少40-50个吧.我们在学习的时候,有两种思路,一种是先作题,遇到不会的就去问:还有一种就是先把书都看了,然后再做题.这儿呢,我们就先介绍大概的类别,至于细节指令,我们线下自我修行吧. 1.必须要会的指令 (1)ng-app 一个页面仅能有第一个ng-app起作用…

偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下载体验一下. 言归正传,当前前端的开发中,MVVM框架非常流行,比较典型的如:AngularJS.VueJS等,这部分框架基本都有一个指令的概念,在工具中配置相关的提示,可以极大地方便的我们的开发,下面就来介绍一下如何在Hbuilder中进行配置. 依次点击:工具 -> 扩展代码块 -> 自定义h…

一.前言 早已听说AngularJS的大名,并在很久前也编写过些小demo,但是都没有系统学习过.由于,在下个版本项目中用到了AngularJS,so,那就一起再来研究研究呗. 说到,这个AngularJS,其核心就是对HTML标签的增强. 何为HTML标签增强? 其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive). 至于说AngularJS是MVC,亦或MVVM框架? 都不是,它是M…

原翻译链接:https://github.com/xufei/Make-Your-Own-AngularJS/edit/master/01.md 原文链接:http://teropa.info/blog/2013/11/03/make-your-own-angular-part-1-scopes-and-digest.html Angular是一个成熟和强大的JavaScript框架.它也是一个比较庞大的框架,在熟练掌握之前,需要领会它提出的很多新概念.很多Web开发人员涌向Angular,有不…

一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-model="" [name=""] [required=""] [ng-required=""] [ng-minlength=""] [ng-maxlength=""][ng-pattern…

目录 基本验证 验证插件messages 自定义验证 基本验证 <form name="form" novalidate ng-app> <span>{{form.$invalid}}</span> <span>{{form.$valid}}</span> <span>{{form.$dirty}}</span> <span>{{form.$pristine}}</span> &…

取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解...... 根据之前的经验,就现有的前端项目,如果最初没有良好的设计,做到一定阶段一定会变得难以维护,就算最初有设计,变化无常的PM也会让你的项目BUG丛生. 一个页面的复杂程度不断的增加,依赖模块也会变得混乱,而其中最为头疼的就是页面级随心所欲的DOM操作了! MVC类的框架可以很好的解决以上问…

写在前面 因为zepto.jQuery2.x.x和Nuclear都是为现代浏览器而出现,不兼容IE8,适合现代浏览器的web开发或者移动web/hybrid开发.每个框架类库被大量用户大规模使用都说明其戳中了开发者的刚需.本文将对比zepto/jQuery到Nuclear的设计和演化的过程. 无框架时代 互联网的春风刚刮来的时候,人们当时利用三剑客制作网页. <div onclick="showMsg()"></div> <script> funct…

AngularJS 表单和控件可以验证输入的数据. 实例 <!DOCTYPE html> <html> <script src= "http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script> <body> <h2>Validation Example</h2> <form ng-app="myApp"…

年底了越来越懒散,AngularJs的学习落了一段时间,博客最近也没更新.惭愧~前段时间有试了一下用yeoman构建Angular项目,感觉学的差不多了想做个项目练练手,谁知遇到了一系列问题.yeoman是基于node.js的一套工具包,由于我一直在windows下编程,而且node.js对于windows环境的支持也在慢慢加强,所以想尝试在windows下用yeoman跟搭建一个项目.过程远比想象的坎坷多了,各种报错,各种搜资料解决问题,最终还是无法解决一些编译出错,以失败告终,转战Linux…

  为期半个月的项目实践开发,已完整告一段落,团队小组获得第一名,辛苦总算没有白费,想起有一天晚上,整个小组的人,联调到12点才从公司回去,真是心酸.这里总结一下,项目过程中遇到的问题 和感悟.哈哈,放张集体照.嘿嘿,项目所有的不同的team的小伙伴,一群优秀的小伙伴(大多都来自高校211,985)么么哒.下面介绍下我们组的产品和问题. 项目已放在github上:https://github.com/foreverjiangting/myApp/tree/master/myApp/myApp 一…

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> input.ng-invalid { bac…

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" required />   2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": <input type="text" ng-minlength="5" /> 3. 最大长…

这篇是我参加QCon北京2014的演讲内容: 提纲: 企业应用在软件行业中占有很大的比重,而这类软件多数现在也都采用B/S的模式开发,在这个日新月异的时代,它们的前端开发技术找到了什么改进点呢? B/S企业软件前端开发模式大体上与桌面软件类似,都是偏重量级的,在前端可能会有较多的业务逻辑,这些业务逻辑如何被合理模块化,与界面分离,以便测试,成为这个领域的一个重要挑战.另一方面,由于企业应用的界面相对规整,偏重的是数据存取,没有太多花哨的东西,所以常见的界面控件也是可枚举的,如何让开发界面的工作能…

AngularJS中的表单验证 AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z…