当前位置: 首页 > 工具软件 > At-Angular > 使用案例 >

angularJs中筛选功能-angular.filter-1

姚星河
2023-12-01

以下介绍为自己在使用angular-filter时,简单总结的用法。

开始
1.你可以使用4中不同的方法来安装angular-filter:

克隆或创建这个存储库
通过bower:通过在你的终端执行:$ bower install angular-filter
通过npm:通过在你的终端执行:$ npm install angular-filter
通过cdnjs: http://www.cdnjs.com/libraries/angular-filter
2.在包含或Angular本身外,在引用angular-filter.js(或者angular-filter.min.js)在你的项目index.html中;

3.添加‘angular.filter’依赖项;

当你做完这些,你的文件看起来就类似以下:

<!doctype html>

... ... filter 从数组中选取一个子集,并将其返回成一个新的数组;

用法:

// html中:{{ collection | filter : expression : comparator}}
// js中:$filter(‘filter’)(array, expression, comparator)
参数:array:想筛选的数组
expression:用于从数组中筛选的条件
comparator:用于确定预期值(从筛选器表达式)和实际值(从数组中的对象)中使用的比较器,应视为匹配。

$scope.friends = [
{name:‘John’, phone:‘555-1276’},
{name:‘Mary’, phone:‘800-BIG-MARY’},
{name:‘Mike’, phone:‘555-4321’}
]

{{friendObj.name}} {{friendObj.phone}}

<–result
John 555-1276
–>
Date
https://docs.angularjs.org/api/ng/filter/date

将日期筛选为想要的日期格式;

用法:

// html中:{{ collection | date : format : timezone}}
// js中:$filter(‘date’)(date, format, timezone)
参数:format为设置的日期格式,例如:‘yyyy-MM-dd’
timezone被用于格式化时区。

{{1288323623006 | date:‘yyyy-MM-dd HH:mm:ss Z’}}
<–result:
2010-10-29 11:40:23 +0800
–>
Collection
concat
将另外一个对象或者数组拼接到已有的对象或者数组之后;
基本思路如下:
1)使用JQ的 . g e t J S O N ( ) 读 取 J S O N 文 件 , 将 读 取 的 数 据 使 用 .getJSON() 读取JSON文件,将读取的数据使用 .getJSON()JSON使.each() 进行循环遍历,同时在循环体中在 里面插入option 值为当前遍历的值。

2)市级随省级变化而变化,我的做法是,重新再读取一次JSON文件,使用onchange()来监测 选项的变化。

3)通过KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲province option….(each) 循环遍历中进行匹配,如果匹配成功,则取出JSON数据中的“城市”对象,再进行一遍$.(each) 遍历,同时组装html代码块(或者直接使用append()进行插入,但这样的话就必须在函数的开始就清空对应的html内容)。

4)使用.html() 将上面组装好的html代码块插入到html文档中。

5)区级随市级变化而变化,参考第2,3,4步。

 类似资料: