script:

参数item是由AngularJs提供的,是应当被过滤的对象集合。而showComplete是我们传入的参数。

{{item.action}}

用ng-model创造一个名为showComplete的数据

script:

<script type="text/javascript">// <![CDATA[
todoApp.filter("checkedItems",function(){
return function (items,showComplete){
var resultArr =[];
angular.forEach(items,function(item){
if(item.done==false||showComplete==true){
resultArr.push(item);
}
});
return resultArr;
}
});
//</script> <p>参数item是由AngularJs提供的,是应当被过滤的对象集合。而showComplete是我们传入的参数。</p>
<p>{{item.action}}</p>

<tr ng-repeat="item in todo.items|checkedItems:showComplete|orderBy:'action'">
<td>{{item.action}}</td>
</tr>

用ng-model创造一个名为showComplete的数据模型值。
<lable><input type="checkbox" ng-model="showComplete">show complete</input></lable>    show complete

AngularJs学习之一使用自定义的过滤器的更多相关文章

  1. AngularJs学习笔记5——自定义服务

    前面整理了AngularJs双向数据绑定和自定义指令的相关内容,从手册上看也知道,ng部分还包括过滤器和函数,以及服务等. 过滤器:filter,就是对数据进行格式化,注意管道格式,例如: {{表达式 ...

  2. AngularJs学习笔记3-服务及过滤器

    距离上次别博客有有一段时间了,因为最近公司和个人事情比较多,也因为学习新的知识所以耽搁了,也有人说Angularjs1.5没有人用了,没必要分享,我个人感觉既然开头了我就坚持把他写完,对一些还在使用或 ...

  3. AngularJs学习笔记3——自定义指令

    指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一 ...

  4. vue学习(十六) 自定义私有过滤器 ES6字符串新方法 填充字符串

    <div id="app"> <p>{{data | formatStr('yyyy-MM-dd')}}</p></div> //s ...

  5. AngularJS学习---REST和自定义服务(REST and Custom Services) ngResource step 11

    1.切换目录 git checkout step- npm start 2.效果图 效果图和step 10的没有什么差别,这里主要的改动都是代码,代码做了很多优化,这里效果图就不再贴出来了. 3.实现 ...

  6. AngularJS学习笔记(四) 自定义指令

    指令(directive)是啥?简单来说就是实现一定功能的XXX...之前一直用的ng-model,ng-click等等都是指令.当我有一个ng没提供的需求的时候,就可以自定义个指令.指令的好处显而易 ...

  7. java学习笔记(2):获取文件名和自定义文件过滤器

    //自定义文件过滤器import java.io.File; import javax.swing.filechooser.*; public class JavaChooser extends Fi ...

  8. Spring Cloud Alibaba学习笔记(21) - Spring Cloud Gateway 自定义全局过滤器

    在前文中,我们介绍了Spring Cloud Gateway内置了一系列的全局过滤器,本文介绍如何自定义全局过滤器. 自定义全局过滤需要实现GlobalFilter 接口,该接口和 GatewayFi ...

  9. AngularJs学习笔记--concepts(概念)

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/concepts 继续.. 一.总括 本文主要是angular组件(components)的概览,并说明 ...

随机推荐

  1. android:TableLayout表格布局详解

    1.TableLayout简介2.TableLayout行列数的确定3.TableLayout可设置的属性详解4.一个包含4个TableLayout布局的实例及效果图一.Tablelayout简介  ...

  2. MVC code first数据迁移 转

    coptto:http://www.cnblogs.com/miro/p/4164076.html 本篇是相对独立的一篇,主要讲解不丢失数据进行数据库结构升级. 前面我们讲解EF功能时(见第三篇文章) ...

  3. 多项式FFT相关模板

    自己码了一个模板...有点辛苦...常数十分大,小心使用 #include <iostream> #include <stdio.h> #include <math.h& ...

  4. javascript中使用循环链表实现约瑟夫环问题

    1.问题 传说在公元1 世纪的犹太战争中,犹太历史学家弗拉维奥·约瑟夫斯和他的40 个同胞被罗马士兵包围.犹太士兵决定宁可自杀也不做俘虏,于是商量出了一个自杀方案.他们围成一个圈,从一个人开始,数到第 ...

  5. codevs 2801 LOL-盖伦的蹲草计划

     时间限制: 1 s  空间限制: 256000 KB  题目等级 : 黄金 Gold 题目描述 Description 众所周知,LOL这款伟大的游戏,有个叫盖伦的英雄.他的伟大之处在于他特别喜欢蹲 ...

  6. CSS3 perspecitve属性

    M M .div1 { position: relative; height: 150px; width: 150px; margin: 0px; padding:2px; border: 1px s ...

  7. 职责链(Chain of Responsibility)模式在航空货运中的运用实例

    设计模式这东西,基本上属于“看懂一瞬间,用会好几年”.只有实际开发中,当某一模式很好的满足了业务需求时,才会有真切的感觉.借用一句<闪电侠>中,绿箭侠教导闪电侠的台词:“不是你碰巧遇到了它 ...

  8. 前端见微知著工具篇:Bower组件管控

    在上一篇文章中,我们提到了利用Grunt可以完成的内容,其中最主要的功能就是利用各种Node的组件来搭配出一个自动化高亮,自动化运行等的Web前端开发环境.但是Bower也是一个专门来管理各种依赖组件 ...

  9. SUBLIME TEXT 2中,光标移入移出括号的快捷键设置

    无赖右方向键→和End键都在键盘的另一边,每次输入完一个函数,光标在各种括号中间,有什么更好的方式将光标移出来呢?在Sublime Text 2中,我们可以自己设置快捷键: { "keys& ...

  10. WPF制作的小型笔记本-仿有道云笔记

    楼主所在的公司不允许下载外部资源, 不允许私自安装应用程序, 平时记录东西都是用记事本,时间久了很难找到以前记的东西. 平时在家都用有道笔记, 因此就模仿着做了一个, 先看下实际运行图片: 1. 初始 ...