js框架——angular.js（5）
1. 3种过滤方式
<html>
<head>
<meta charset='utf-8'>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app="MyApp">
<div ng-controller="MyCtrl"> <h3>Filter by String</h3>
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by name" autofocus>
</form>
<ul ng-repeat="friend in friends | filter: query | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div> <div ng-controller="MyCtrl">
<h3>Filter by Object</h3>
<form class="form-inline">
<input ng-model="query" type="text" placeholder="Filter by name and age=20">
</form>
<ul ng-repeat="friend in friends | filter: { name: query, age: '20' } | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div> <div ng-controller="MyCtrl">
<h3>Filter by Predicate Function</h3>
<ul ng-repeat="friend in friends | filter: filterFunction | orderBy: 'name' ">
<li>{{friend.name}} ({{friend.age}})</li>
</ul>
</div>
</body>
</html>
var app = angular.module("MyApp", []);
app.controller("MyCtrl", function($scope) {
$scope.friends = [
{ name: "Peter", age: 20 },
{ name: "Pablo", age: 55 },
{ name: "Linda", age: 20 },
{ name: "Marta", age: 37 },
{ name: "Othello", age: 20 },
{ name: "Markus", age: 32 }
];
$scope.filterFunction = function(element) {
return element.name.match(/^Ma/) ? true : false;
};
});
3种过滤方式，第一种——
根据变量过滤。
第一个过滤中，我们对着input使用了ng-model，使得过滤条件中添加了filter: query
乍一看没什么问题，运行起来也还可以，但是问题是当我们输入数字的时候，连后面的年龄也会变成搜索条件，如果对象中的属性只有几个还好说，一旦多起来，这个过滤根本就是不可行的。
【所以我们需要将滤过变得更加精确。】
结果就是第二个过滤，根据对象提供的条件进行过滤，过滤条件变成了对象filter: { name: query, age: '20' }，这便使得我们过滤的更加方便和精确。
第三种过滤方法是通过函数进行过滤。
当我们对着filter：进行修改，将值改成true的时候，你会发现没有一个符合的数值出现，而改为false，就会出现所有的信息。于是，只要我们创建一个判断函数，这个函数需要带入判断对象作为参数并返回一个布尔值，那么这个函数就可以当过滤器使用了，并且，由于是个函数，所以过滤机制便可以写的复杂的多。
js框架——angular.js（5）的更多相关文章
- js框架——angular.js(6)
1. ng-class 这个指令是用来绑定一个或者多个css代码.它的值一般是一个表达式,也可以是函数什么的,只要返回的确实是一个类的名字就可以—— ng-class="nextPageDi ...
- js框架——angular.js
这是一个前端用的框架,使用简单.详细介绍这里就不写了,主要介绍其语法和作用—— 1. 声明一个angular 如果想要使用一个angular代码,则需要在[想要使用angular的范围内写上ng-ap ...
- js框架——angular.js（2）
1. 模块的利用扩充 模块的名称也可以当做变量使用,例如: <body ng-app> <label><input type="checkbox" n ...
- js框架——angular.js(4)
1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...
- js框架——angular.js（3）
1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...
- 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步
Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...
- Electron、Node.js、JavaScript、JQuery、Vue.js、Angular.js,layui,bootstrap
转载:https://blog.csdn.net/meplusplus/article/details/79033786 layui :是基于jquery库的封装开发. bootstrap:同样基于 ...
- vue.js与angular.js的区别（个人）
刚进入实训 讲师就要发一些什么比较高大上的东西,本人才疏学浅 浅浅的分享一下angularjs 和vue.js的区别.只是简单的理解一下 大神勿喷. 生实训之前学习的angular.js 只是理解了 ...
- Angular JS - 5 - Angular JS 模块和控制器
1.引入 1.5版本的angularjs,直接打印angular对象: --> <!DOCTYPE html> <html> <head lang="en ...
随机推荐
- apicloud 初学
html5:在创建html时为了防止页面缩放等不兼容效果,要创建个viewport <meta name="viewport" content="maximum-s ...
- Java Tcp文件传输---转载
/** 客户端 1.服务端点 2.读取客户端已有的文件数据 3.通过socket输出流发给服务端 4.读取服务端反馈信息 5.关闭 **/ import java.io.*; import java. ...
- Ubuntu14.04下手动建立快捷方式
先在桌面创建一个文件:文件内容如下 [Desktop Entry]Encoding=UTF-8Name=eclipseComment=eclipse ideExec=/home/mars/eclips ...
- ****ural 1141. RSA Attack（RSA加密，扩展欧几里得算法）
1141. RSA Attack Time limit: 1.0 secondMemory limit: 64 MB The RSA problem is the following: given a ...
- C#中几种数据库的大数据批量插入
C#语言中对SqlServer.Oracle.SQLite和MySql中的数据批量插入是支持的,不过Oracle需要使用Orace.DataAccess驱动. IProvider里有一个用于实现批量插 ...
- 《Windows驱动开发技术详解》之驱动程序调用驱动程序——通过设备指针调用其他驱动程序
本节介绍“手动”构造各个IRP,然后将IRP传递到相应驱动程序的派遣函数里. 获得设备指针 每个内核中的句柄都会和一个内核对象的指针联系起来.ZwCreateFile内核函数可以通过设备名打开设备句柄 ...
- DOM操作-根据name获取网页中的全部复选框
描述: 与id不同,多个元素可以使用相同的name属性,如果需要获取这一类元素的DOM对象,就需要使用getElementsByName()函数 代码: <!DOCTYPE html> & ...
- CSS3秘笈：第五章
第五章 层叠管理样式 1.层叠是决定哪些样式属性要被应用到某一个元素的一套规则. 2.最近的祖先样式胜出:浏览器会采用离相关标签最近的样式. 3.直接应用的样式胜出:任何直接应用于指定标签的样式都战 ...
- 初识mongo
进入mongo /usr/local/mongodb/bin/mongo --host 查看所有db show dbs 查看当前进入的db db 查看当前db的所有collection show co ...
- SSH登录很慢问题的解决方法
用ssh连其他linux机器,会等待10-30秒才有提示输入密码.严重影响工作效率. 关闭ssh的gssapi认证 用ssh -v user@server 可以看到登录时有如下信息: debug1: ...