angularjs实现搜索的关键字在正文中高亮出来_AngularJS_脚本之家

1、定义高亮 filter

在 Angular 中,大家不该计算直接改过 DOM 的剧情,当供给更新 DOM
内容的时候,应该修改的莫过于是大家的数据模型,相当于 $scope
中的数据,Angular 会帮助我们将修正之后的数测量身体现在页面中。

我们希望物色的重要字在正文中高亮出来,正文内容即是过滤器的第叁个参数,第2个参数正是寻找关键字,那样,大家的过滤器将会有五个参数了。

而是,在稍稍情状下,比方我们有三个寻找框,希望将寻觅的严重性字在正文中高亮出来,那时就能够倍感比较费力了,filter
能够协理我们管理这种情景。

高亮的法则很简短,将索要高亮的原委使用 span
标识隔绝出来,再增进叁个高亮的 class样式 举行描述就足以了。

事实上,超级多时候,大家的数量是无法直接出口到 DOM
中的,标准的比方日期,大概货币等等,平常须要将大家内部的数额格式化之后,再出口到页面中,在
Angular 中,这么些职业正是通过 filter 来落实的。

app.filter("highlight", function{ var fn = function{ $log.info; $log.info; if  { return $sce.trustAsHtml; } text = encodeURIComponent; search = encodeURIComponent; var regex = new RegExp var result = text.replace(regex, '$&'); result = decodeURIComponent; $log.info; return $sce.trustAsHtml; }; return fn;});

filter 是 module 级其他劳动,定义之后,能够在全方位 module
内直接行使,有着超级高的复用性。

$sce, 和 $log 是 angular 提供的八个服务,此中 $sce 服务供给运用
ngSanitize
模块。关于那个模块,能够参照:angular-ngSanitize模块-$sanitize服务详细明白

为了验证难点,先想起一下的 走进AngularJs
说美赞臣下过滤器,然后详细表达什么管理寻找关键字高亮难题。你能够直接从自定义过滤器部分开始。

2、定义html视图

1. 过滤器的用法

3、控制器

1. 模板中央银行使

app.controller("search", function{ $scope.text = "hello, world. hello, world. hello, world. this is filter example."; $scope.notify.search = "";})

咱俩得以直接在{{}}中使用filter,跟在表达式前面用 | 分割,语法如下:

当心在调控器中引进过滤器highlight

{{ expression | filter }}

当寻觅的基本点字为数字时,如”1″,报如下错误:

也可以七个filter连用,上三个filter的出口将用作下三个filter的输入。

1.直接try catch处理,这样太轻易了,並且会以致新的主题材料现身

{{ expression | filter1 | filter2 | ... }}

2.把escape全体改成encodeU奇骏IComponent编码,试了一下不可能解决难题

filter能够收起参数,参数用 : 实行分隔。

如上正是本文的全体内容,希望对大家的就学抱有助于,也指望我们多多关照脚本之家。

{{ expression | filter:argument1:argument2:... }}

除开对{{}}中的数据开展格式化,大家还足以在指令中利用filter,比方先对数组array举行过滤管理,然后再循环输出:

2. 在 controller 和 service 中使用

笔者们的js代码中也足以选择过滤器,方式正是我们耳濡目染的信赖注入,比方笔者要在controller中应用currency过滤器,只需将它注入到该controller中就能够。

app.controller('testC',function($scope,currencyFilter){ $scope.num = currencyFilter; }

在模板中央银行使{{num}}就能够直接出口
$123,534.00了!在服务中选择filter也是平等的道理。

这会儿您大概会有纠缠,要是自身要在controller中运用多少个filter,难道要多个叁个注入吗,那岂不太困难了?小家伙莫焦急~ng提供了一个$filter服务能够来调用所需的filter,你只需注入八个$filter就够了,使用办法如下:

app.controller('testC',function{ $scope.num = $filter; $scope.date = $filter; }

2. 内置的 filter

  1. currentcy,
    使用currency能够将数字格式化为货币,暗中认可是卢比符号,你能够仁慈传入所需的符号

    {{num | currency : ‘¥’}}

  2. date,
    原生的js对日期的格式化能力轻巧,ng提供的date过滤器基本能够满意平时的格式化必要。

    {{date | date : ‘yyyy-MM-dd hh:mm:ss EEEE’}}

  3. filter, 注意了,那几个过滤器的名字叫
    filter,不要搞混了。用来管理二个数组,然后能够过滤出含有有些子串的成分,作为三个子数组来回到。能够是字符串数组,也得以是目标数组。假诺是指标数组,能够相称属性的值。它接收二个参数,用来定义子串的相配准则。

    $scope.childrenArray = [ {name:’kimi’,age:3}, {name:’cindy’,age:4}, {name:’anglar’,age:4}, {name:’shitou’,age:6}, {name:’tiantian’,age:5} ];

    $scope.func = function{return e.age>4;}

使用 filter 过滤器

{{ childrenArray | filter : 'a' }} //匹配属性值中含有a的{{ childrenArray | filter : 4 }} //匹配属性值中含有4的{{ childrenArray | filter : {name : 'i'} }} //参数是对象,匹配name属性中含有i的{{childrenArray | filter : func }} //参数是函数,指定返回age>4的
  1. json, 格式化 json
    对象。json过滤器可以把二个js对象格式化为json字符串。成效就和大家熟谙的JSON.stringify(卡塔尔国同样。

    {{ jsonTest | json}}

  2. limitTo,
    limitTo过滤器用来截取数组或字符串,接纳三个参数用来内定截取的长短。只好从数组或字符串的开端实行截取

    {{ childrenArray | limitTo : 2 }} //将会展现数组中的前两项

  3. lowercase, 转变为小写。把数量转载为总体大写。

  4. uppercase, 转换为大写。

  5. number,
    格式化数字。number过滤器可以为叁个数字增加千位分割,像那样,123,456,789。同一时间接选举择二个参数,能够钦命小float类型保留几个人小数:

    {{ num | number : 2 }}

  6. orderBy
    排序,orderBy过滤器能够将三个数组中的成分进行排序,选用一个参数来钦定排序法规,参数能够是二个字符串,表示以该属性名称实行排序。能够是贰个函数,定义排序属性。还足以是三个数组,表示依次按数组中的属性值进行排序,

    {{ childrenArray | orderBy : ‘age’ }} //按age属性值实行排序{{ childrenArray | orderBy : orderFunc }} //依照函数的重回值实行排序{{ childrenArray | orderBy : [‘age’,’name’] }} //如果age相符,根据name实行排序

3. 自定义 filter

大家先定义个未有参数的过滤器。第三个例证来自 Angular 官方的文书档案。

大家盼望检查数据是或不是为真,假设为真的话,彰显为三个 ✓ ,不然的话,呈现为
✘, 在 Unicode 中,\u2713 -> ✓, \u2718 ->
✘,所以,我们必要做的正是检查数据是还是不是为真,然后转向为那七个特殊字符进行输出。

app.filter('checkmark', function() { return function { return input ? '\u2713' : '\u2718'; };});