IT全栈 华强工作室

时，如果首次使用，可能会在渲染完成后发现下拉列表的第一项为空，并且在选择一项之后，为空的第一项已经消失了，这样用户体验上来说很不好。一起使用的，从而我们就可以知道，渲染生成的第一项为空原因肯定和。的时候，是配合模型指令。

Chart.js 是一个令人印象深刻的 JavaScript 图表库，建立在 HTML5 Canvas 基础上。目前，它支持6种图表类型（折线图，条形图，雷达图，饼图，柱状图和极地区域区）。而且，这是一个独立的包，不依赖第三方 JavaScript 库，小于 5KB。其中用到的软件：Chart.js框架，版本1.0.2，一个简单、轻量级的绘图框架，基于HTML5 canvas。这个框架能很多种图，折线图、柱状图、玫瑰图等。excanvas.js，这是一个专门解决canvas IE兼容问题的框架。

HTML:让表单、文本框只读，不可编辑的方法有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使中国">的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。方法1:onfocus=this.blur()中国"onfocus=this.blur()>方法2:readonly中国"readonly>中国"readonly="tru

比如一个地图应用，某个$state中定义元素input，输入地址后，地图要定位，同时另一个状态下的列表要显示出该位置周边商铺的信息，此时多个$scope都在监听地址变化。(1) 在AngularJS的app.js中用ui-router定义路由，比如现在有两个页面，一个页面（producers.html）放置了多个producers，点击其中一个目标，页面跳转到对应的producer页，同时将producerId这个参数传过去。(2) 在获取地址的controller中：// 动态获取地址，接口方法省略。

angular控制器通信的方式有三种：1，利用作用域继承的方式。即子控制器继承父控制器中的内容2，基于事件的方式。即$on,$emit,$boardcast这三种方式3，服务方式。写一个服务的单例然后通过注入来使用。

这个是为后面的cancel做准备的，当你放弃修改的时候，你希望你的值恢复成原样，这个时候，对于angularJS来说，是要对model恢复原样。再往下呢就是对edit click事件的延伸，我们要得到employee name的inputbox，然后对他进行css的转换，比如当你click edit后，应该出现inputbox的css的inactive或者active的调整，并且移除readOnly。当你找到之后呢，就要对这个DOM进行操作，对于我们来说，就是对他绑定一个click的事件。

在ng-repeat里显示序号： $index // 这个是从0计数的。ng-click里带当前的a，button等的事件。根据selector获取元素。中常用到的，未完待续...

JS利用正则表达式校验手机号绪 由于项目需求，需要在前端实现手机号码的校验。当然了，对于基本的格式校验应该放在客户端进行，而不需要再将待校验的手机号发送至服务端，在服务端完成校验，然后将校验结果返回给客户端，客户端根据返回的结果再进行进一步的处理。如此反而复杂化了处理过程。 其实，处于安全考虑，应该在服务端进行二次校验。以下为在客户端的JS中校验手机号码格式

Cookie'data'possiblynotsetoroverflowedbecauseitwastoolarge(5287>4096bytes)!故事起源 项目开发过程中遇到以上问题，刚开始以为只是个警告，没太在意。后来发现直接影响到了程序的执行效果。果断寻找解决方法。问题分析 根据Chrome浏览器信息定位，显示以下代码存在错误:

脏值检查需求 在项目开发过程中，需要对药店信息进行更改。如下图所示。现在的需求是：当药店信息没有发生变化时，点击“更新信息”按钮，提示“药店信息未做任何更改”。实现 可以利用angualr的脏值检查机制解决。 由于对angular的脏值检测机制不是很了解，貌似也不太好学习。就考虑使用别的方法，也可以使用ng-change内置指令,通过控制业务逻辑实现。Demo

HTML5实现获取地理位置信息并定位功能注：请点击此处进行充电!前言 这篇文章主要介绍了HTML5实现获取地理位置信息并定位功能,本文讲解了原生HTML5、百度地图、谷歌地图等三种获取理位置信息并定位的方法,需要的朋友可以参考下。HTML5提供了地理位置定位功能（GeolocationAPI），能确定用户位置，我们可以借助HTML5的该特性开发基于地理位置信息的应用。本文

JS实现时间选择插件引导语 在项目开发过程中，需要实现根据以日期为筛选条件之一，故需要实现时间选择插件。对于未接触的新事物，自己总是感觉不明觉厉。其实，有些实现可以使用很简单的方法即可。以此为例，偶然的一次翻看课本发现HTML5中已经设计到此种实现。其中，设置input元素的type属性为datetime-local即可实现。问题 实际编码过程中，还是出现了问题。

JS实现分页操作前言 项目开发过程中，进行查询操作时有可能会检索出大量的满足条件的查询结果。在一页中显示全部查询结果会降低用户的体验感，故需要实现分页显示效果。受前面“JS实现时间选择插件”的启发，自己首先需要查看一下HTML5能否实现此效果。 整了半天，不管是用纯CSS3也好，还是用tmpagination.js还是bootstrap组件也好，到最后自己静下心来理

浏览器兼容性解决之道前言 浏览器兼容性一直是前端开发中不得不面对的一个问题。而最突出的就是IE。对绝大多数公司来说，兼容IE6的性价比已经很低，而IE7则几乎已经绝迹。所以，常见的兼容性下限是IE8。这也正是Angular1.2x的兼容性目标，Angular团队声明：Angular的持续集成服务器会在IE8下运行所有的测试。但这些测试不会运行在IE7及以下版本，它们也不会保证An

AngularJS进阶(四十)创建模块、服务学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块？ 服务允许你打包可重用的功能，使之能在此应用中使用。 模块允许你打包可重用的功能，使之能跨应用使用。一、应用程序模块化 先看看一个没有模块化的程序 Angluar test

基于项目实例解析ng启动加载过程前言 在AngularJS项目开发过程中，自己将遇到的问题进行了整理。回过头来总结一下angular的启动过程。 下面以实际项目为例进行简要讲解。1.载入ng库2.等待，直到DOM树构造完毕。3.发现ng-app，自动进入启动引导阶段。4.根据ng-app名称找到相应的路由。5.加载默认地址。6.Js顺序执行，加载相应模版页sys_tpls/

AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1)，按照既定的业务逻辑应该是服务端接收到请求后，首先返回查询的前7条数据，待客户端出现上拉加载时，继续查找另外7条数据。但实际情形是不确定的，在服务端控制台(见图2)可看到begno一直到了126，也就是相当于客户端往服务端请求了127次，这是一个令人无法忍受的结果。图1 客户端搜索栏图2

requirejs+angular+angular-route浅谈HTML5单页面架构 众所周知，现在移动Webapp越来越多，例如天猫、京东、国美这些都是很好的例子。而在Webapp中，又要数单页面架构体验最好，更像原生app。简单来说，单页面App不需要频繁切换网页，可以局部刷新，整个加载流畅度会好很多。 废话就不多说了，直接到正题吧，浅谈一下我自己理解的

IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题，结局方案为更换jquery、angularjs、IE的版本。 1.首先尝试更换jquery版本为1.7.2 jquery-1.9.1.js-->jquery-1.7.2.js--> jquery2.1.4.js 无效 2.尝试更换IE版本IE8 IE11-

AngularJS项目开发技巧之利用Service&Promise&Resolve解决图片预加载问题(后记)前言 在“AngularJS项目开发技巧之图片预加载”一文中，自己曾经天真的认为提升服务端带宽就可以解决图片加载问题。但自己的想法错了，通过阅读破狼的书《AngularJS深度剖析与最佳实践》，隐隐察觉到是自己的项目架构出现了问题。存在很多待优化的地方。其书中这样写到“如果

Angular数据更新不及时问题探讨前言 在修复控制角标正确变化过程中，发觉前端代码组织层次出现了严重问题。传递和共享数据时自己使用的是rootScope,为此造成了全局变量空间的污染。根据《AngularJs深度剖析与最佳实践》，如果两个控制器的协作存在大量的数据共享和交互可以利用Factory等服务的“单例”特性为它们注入一个共享对象来传递数据。而自己在使用rootScope

简介AngularJS中使用factory和service的方法 AngularJS支持使用服务的体系结构“关注点分离”的概念。服务是JavaScript函数，并负责只做一个特定的任务。这也使得他们成为维护和测试的单独实体。控制器，过滤器可以调用它们作为需求的基础。服务使用AngularJS的依赖注入机制注入正常。 AngularJS提供例如许多内在的服务，如：$htt

书海拾贝之特殊的ng-src和ng-href在说明这两个指令的特殊之前，需要先了解一下ng的启动及执行过程，如下：1)浏览器加载静态HTML文件并解析为DOM；2)浏览器加载angular.js文件；3)angular监听DOMContentLoaded事件，监听到时开始启动；4)angular寻找ng-app指令，确定作用范围；

有时一个问题解决不了，就应该尝试着通过其它途径进行解决。就像在本文中，既然直接获取无法获取到JS脚本中组件的ID，自己就尝试着将获取到的页面内容再次放到原页面内，然后通过DOM操作再次获取。

AngularJS项目开发技巧之图片预加载绪 项目(移动端采用Ionic框架)开发完毕，测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载，主要原因还是网速。如下图左所示，图片加载完毕如下图右所示。 问题分析 尝试进行图片加载的优化工作。 经过与Ionic群内卖火柴朋友的聊天

AngularJS项目开发技巧之localStorage存储绪 项目开发完毕，测试阶段发现后台管理端二维码生成有问题，问题在于localStorage的存储。如下图左所示，二维码生成完毕包含信息如下图左所示，实际二维码信息如下图右所示: 经过测试发现二维码实际存储的是上一次的结果。好熟悉~Bingo,自己做导航栏高亮时就遇到过这个问题，当时就是使用的loc

解决AngualrJS页面刷新导致异常显示问题绪 俗话说，细节决定成败，编程亦是如此。编程过程中我们可能会不自觉的忽视一些细节问题，殊不知，这些细节正是导致页面显示出现问题的地方。今略举一例，与君共勉之。 页面正常加载后，显示如下： 按F5刷新之后，页面如下所示: 很明显，页面显示出现了异常。回过头再看看Chrome的

AngularJS实现二维码信息的集成思路需求 实现生成的二维码包含订单详情信息。思路获取的内容数据如下: 现在可以获取到第一级数据，第二级数据data获取不到。利用第一级数据的获取方法获取不到第二级数据。for(i in data){alert(i); //获得属性 if(typeof(data[i]) == "o

在AngularJS应用中集成百度地图实现定位功能注：请点击此处进行充电!前言 根据项目需求，需要实现手机定位功能，考虑到百度业务的强大能力，遂决定使用百度地图第三方服务。 添加第三方模块的步骤与前面介绍的“在AngularJS应用中集成科大讯飞语音输入功能”步骤相同，在此不再赘述。问题 1.有些手机无法实现定位功能(以我的手机为例:MX2，刚

在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目需求，需要在首页搜索框中添加语音输入功能，考虑到科大讯飞语音业务的强大能力，遂决定使用科大讯飞语音输入第三方服务。软件首页截图如下所示： 涉及的源代码如下所示: //语音识别$rootScope.startRecognize = function() {var speech;

在AngularJS应用中实现微信认证授权遇到的坑前言 项目开发过程中，移动端新近增加了一个功能“微信授权登录”，由于自己不是负责移动端开发的，但最后他人负责的部分未达到预期效果。不能准确实现微信授权登录。最后还得靠自己做进一步的优化工作，谁让自己是负责人呢？原来负责人就是负责最后把所有的BUG解决掉。 首先，熟悉一下微信授权部分的源代码，如下所示:

JS实现导入文件功能 赠人玫瑰，手留余香。若您感觉此篇博文对您有用，请花费2秒时间点个赞，您的鼓励是我不断前进的动力，共勉！(PS:此篇博文是自己在午饭时间所写，为此没吃午饭，这就是程序猿的生活。) 项目开发过程中，需要实现文件上传功能。借此机会学习之。 使用HTML中现有的inputtype“file”可以支持这一功能。如下所示:

抽象模板不能被激活，但是它的子模板可以被激活。抽象模板可以提供一个包括了多个有名的视图的模板，或者它可以传递作用域变量$scope给子模板。使用它可以在同一个url下传递自定义数据或者预载入的依赖。})})});本文涵盖了ui-router深度及几乎全部的功能。希望你也发现这个库的强大和实用，并在下一个项目中实用这些强大的功能。

AngularJS路由问题解决遇到了一个棘手的问题：点击优惠详情时总是跳转到药店详情页面中去。再加一层地址解决了，但是后来发现问题还是来了:Couldnotresolve'yhDtlMaintain/yhdetail'fromstate'yhMaintain'药店详情http://192.168.1.118:8088/lmapp/index.html#/0优惠券详情

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中文文档更容易理解，前提是你的英语基础还可以。英文文档对于知识点讲述简明扼要，通俗易懂，而有些中文文档读起来特别费力，基础差、底子薄的有可能一会就会被绕晕了，最起码英文文档中的代码与中文文档中的代码是一致的，但知识点讲述实在是差距太大。Angular.jshasapowerfuldire

Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：http://ngmodules.org/modules/angularjs-dropdown-multiselecthttp://dotansimha.github.io/angularjs-dropdown-multiselect/#/AngularJSDropdownMultiselectThisdire

AngularJS+BootStrap实现弹出对话框参考资料：http://angular-ui.github.io/bootstrap/#/modalhttps://www.zybuluo.com/bornkiller/note/6023http://www.html5jq.com/fe/angular_node/20141127/13.html 若想要实现对话

AngularJS实现根据不同条件显示不同控件由于项目需求，需要实现根据不同条件显示不同控件的功能。具体要求如下图所示:即当选择“每单固定减”时，下方只显示“减免金额”一栏；当选择“每单固定折扣”时，下方只显示“折扣比例”一栏；当选择“每单满额减”时，下方只显示“满..减..”两栏。根据自己对angular的了解，应该可以很轻松的实现此功能。 js设置控件

AngularJS改变元素显示状态前言本文描述使用AngularJS提供的ng-show和ng-hide指令实现自动监听某布尔型变量来改变元素显示状态。控制html元素显示和隐藏有n种方法：html的hidden、css的display、jquery的hide()和show()、bootstrap的.hide。今天的重点不是显示和隐藏，而是监听某个布尔变量值，自动改变元素显示和隐藏状态

Angularjs中scope与rootscope区别及联系 scope是html和单个controller之间的桥梁，数据绑定就靠他了。rootscope是各个controller中scope的桥梁。用rootscope定义的值，可以在各个controller中使用。下面用实例详细的说明一下。1.js代码phonecatApp.controller('TestCtrl',[