ng-repeat获取父级INDEX

angularjs的循环嵌套我就不多说了,无非是ng-repeat的嵌套而已,如果需要获取索引请使用$index。

那么问题来了,$index只能获取当前循环的索引,如果需要获取父级的索引怎么办?

原理其实也不难,在父级ng-repeat时利用ng-init写入一个变量即可,子循环是可以访问到的。

html5新属性data api

以往在做列表程序的时候,需要做类似“删除”功能的时候,往往是组装一个URL,类似于这个

index.php?m=news&a=delete&id=10

这是最普通的url方式来进行删除。

Angularjs动态表单项

后台业务系统中有很多CURD操作,一个很简单的例子是OA系统中为员工添加帐号信息,传统的做法是添加完一个就跳转并提示“成功”,后来高级一点的做法是利用jquery来做。

但是一个比较麻烦的问题是需要手动拼接HTML并且插入文档树。

然而,现在有了跨时代神器–angularjs,就是这么炫,强大的双向绑定功能可以帮到我们。

highchats曲线不显示

highchats是什么就不介绍了。一个JS绘图工具库,基于JQ,使用简单方便,但是不注意的话会坑人。

今天兴致满满的去绘图,后端数据也返回了。可是一个纠结的问题困扰了我一下午!

后端数据返回的JSON是

angularjs鼠标悬浮效果

用JQ来做的话很简单的,(通过toggleClass函数就可以了),但是既然提到了angularjs,当然要用angularjs的解决方案来做啦!

angularjs集成了一个jqlite模块(可以理解为阉割版的jquery),提供有限并且常用的功能。

主要用到指令系统中的Link函数,代码就不贴了。

bootstrap3禁用响应式布局

IE8及以下版本的浏览器确实是心中的痛,不支持媒体查询和CSS3,导致bootstrap样式怪怪的。没办法,只能采取折中的办法–禁用响应式布局

  1. 移除 viewport 标签

Grunt快速上手

为什么要使用Grunt?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

怎么使用Grunt?

1.grunt是基于nodejs的,所以请先安装nodejs和npm安装grunt
2.新版本的grunt安装需要两步,终端执行

1
npm install grunt-cli -g

摆脱jquery!angularjs利用指令简单实现滚动翻页

移动开发一个很重要的问题是翻页操作,而现在的主流都是滚动翻页,以往都是用jquery的插件进行实现。用了angularjs之后,要逐步减轻对jquery的依赖。

滚动翻页基本原理就是判断scrollTop和offsetHeight之和 大于等于 scrollHeight

代码

指令

1
2
3
4
5
6
7
8
9
10
app.directive('whenScrolled'function(
  return function(scope, elm, attr
    var raw = elm[0]; 
    elm.bind('scroll'function(
      if (raw.scrollTop+raw.offsetHeight >= raw.scrollHeight) { 
        scope.$apply(attr.whenScrolled); 
      } 
    }); 
  }; 
});

ngResource快速上手

废话不多说,本文的目的就是看过之后就会使用ngResource了。

  1. 引入angular-resource.min.js

jquery插件写法

项目地址

http://xialeistudio.github.io/search/

jquery插件确实是数不胜数,只要你用心找,肯定能找得到!

但是一些小功能想自己写,找的话估计时间还长些,本文简单开发一个 基于jquery的获取url查询字符串的 小插件。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×