分类
Javascript

自定义AngularJS Material模态框

AngularJS Material是Material Design设计方式使用AngularJS实现的,该项目提供了一套基于Material Design 系统设计的可重复使用的,易于测试的UI组件。它的layout使用的是flex来布局的,因此大家就知道了他的兼容性了,但是这个是未来的方向。和AngularJS UI Bootstrap相比,AngularJS Material组件更丰富,比如统一外观的Select(下拉框)、移动设备系统才有的Switch(开关)、Swipe(侧滑)、Bottom Sheet(底部弹出)等组件。AngularJS Material交互性更好、动感更强,更适合做响应式Web App。

分类
Javascript

Angularjs指令怎样传递函数参数

曾经做过一个下钻表格,就是页面一进来显示所有年份的收入,点击某年时会下钻显示该年每个季度的收入,点击某个季度时会下钻显示该季度每个月的收入。可以点击查看效果https://codepen.io/riafan/pen/LdprZo。这里少不了回退显示,我们没有用路由来实现,而是使用的面包屑来导航。在表格单元格上点击时,会使用当前数据源的data属性去渲染下级时间段对应的表格,同时将对应的时间段路径推入数组作为渲染面包屑的数据源。当在面包屑上点击时间段路径时,会根据路径名去整个数据源中去搜索该时间段对应和数据,重新渲染表格。当然实际应用应该从后台动态获取数据的,而且查询参数很多时候跟显示字段一样。比如说{id: 1001, name: 2014; value: 35400},id参数能保证查询出来的值的唯一性,而name却不一定唯一。这里这了方便演示,用了一个列表数组。

分类
Javascript

使用AngularJS HTTP拦截器

做后端用过Spring拦截器的同学应该清楚为什么要用拦截器吗?其实AngularJS在处理与后台交互数据时也可以使用HTTP拦截器。如果我们想要为请求添加全局功能,例如身份认证、错误处理等,在请求发送给服务器之前或服务器返回时对其进行拦截,是比较好的实现手段。

分类
Javascript

使用AngularJS UI Bootstrap自定义下拉框

上一篇文章我们简单介绍了UI Bootstrap渐进增强,侧重于通过修改样式来增强。今天我们来自定义一个下拉框组件,通过使用自定义指令来增强。我在http://www.riafan.com/bootstrap-select/中已经介绍过自定义下拉框的背景了,只不过现在我们是用AngularJS UI Bootstrap来实现。

分类
Javascript

AngularJS UI Bootstrap渐进增强

UI Bootstrap是AngularJS团队在Bootstrap基础上,用AngularJS实现的一组UI控件,包括Tab页,手风琴,下拉菜单,模态窗,日期选择等等。原本这些控件在Bootstrap里是用Jquery写的,而UI Bootstrap不依赖Jquery。刚好最近项目也用到了不小UI Bootstrap控件,由于要对IE8优雅降级,所以AngularJS使用了1.2.32,Bootstrap样式使用了3.x,UI Bootstrap使用了0.12.0。