自定义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。 继续阅读“自定义AngularJS Material模态框”

Angularjs指令怎样传递函数参数

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

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。 继续阅读“AngularJS UI Bootstrap渐进增强”