码迷,mamicode.com
首页 > Web开发 > 详细

AngularJs Filter

时间:2015-11-12 21:54:25      阅读:644      评论:0      收藏:0      [点我收藏+]

标签:

Filter


公司一直比较忙.. 很忧伤.

终于有点儿闲暇继续看会书 写会笔记.

Filter 顾名思义 就是过滤器.

比如 排序,筛选,格式化等等.

有三种方法.

  1. 后台
  2. JavaScript 原生
  3. {{ data | fitler }}

如果用 angularjs 大概就这三种.

区别

  1. 后台

单次传输多,多次传输就很不划算,每次都请求.

  1. 前台.

一次传输的数据较多.

JavaScript 或者 {{}}

无非是 Controller 是否重用的问题.



格式

{{ dataSource | filter }}



自带的Filter


  1. currency 货币
  2. date 时间
  3. filter 过滤器
  4. json Json
  5. limitTo 截取
  6. lowercase 转换小写
  7. number 数字
  8. orderBy 排序

其实没有什么好说的,官方的文档挨个试一试就知道怎么用了.

都只是一些格式转换。 如果觉得官方提供的不顺手。自己写一个便是


非要说的话.

orderBy

不管我再怎么按照他的官方文档做实验。

也无法反转一个数组.

他提供的方式是。

orderby(expression,reverse)

但是似乎结果就是 只要不填写expression

就无法进行性 reverse

或许在处理Json 格式数据的时候。 是没有这种问题的

比如我想反转一个纯粹的数组 [1,2,3,4] 就尴尬了.



自定义Filter.


这个也很简单。无非是将数据源传递给你 做处理.

app.filter(‘testFilter1‘,function(){
    return function(obj) {
        return "haha,this is a filter";
    };
});

不管我收到了什么都返回 字符串。

显示的结果也是字符串.

 

这样就是最简单的一个 filter.

理论上你想干什么都可以。

Sort. 什么之类的。


表单验证.


首先 他可以根据 input type 来进行自动的验证.

比如 type = ‘url‘. 之类的.

他就可以自动进行验证.

必填项 + required 就可以。

 

 

  1. formName.inputFileName.$pristine 没有修改过
  2. formName.inputFileName.$dirty 已经修改过了
  3. formName.inputFileName.$valid 验证通过
  4. formName.inputFileName.$invalid 验证不通过

通过这个就可以知道具体某一个字段的状态

比如就可以通过 ng-class && formName.inputFileName.$valid 来组合css

angularjs 也提供了css的方案.

他会根据验证的状态。 对 input 加入对应css

你只用 添加对应css 即可.





大概就是这样.

配上双向绑定。 angularjs 来处理表单类问题 简直爽的不能再爽..

AngularJs Filter

标签:

原文地址:http://www.cnblogs.com/WebDetail/p/4960300.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!