大佬教程收集整理的这篇文章主要介绍了javascript – AngularJS:过滤和粗体部分的结果,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
ng-repeat="item in items | filter:query | limitTo:10"
和搜索输入
ng-model="search.name"
它的工作原理,但我想使结果中的查询部分粗体.
query = zza
结果:
>李* zza *
> Pi * zza *
> Abc * zza * def
angular.module('app').filter('searchfilter',function() { return function (input,query) { var r = RegExp('('+ query + ')','g'); return input.replace(r,'<span class="super-class">$1</span>'); } });
这是有效的,但是过滤器返回html,所以你需要把角度看作html的结果.为此,您需要将ngSanitize作为模块依赖关系,并将结果与ng-bind-html插入.
这是一个完整的演示:
<div ng-app="app"> <div ng-controller="Ctrl"> <input ng-model="search" placeholder="search a fruit" /> <ul> <li ng-repeat="fruit in fruits| filter:search | limitTo:10" ng-bind-html="fruit | searchfilter:search" ></li> </ul> </div> </div>
和角部分:
angular .module('app',['ngSanitize']) .controller('Ctrl',function($scopE){ $scope.fruits = 'apple orange banana pineaple grape plumb strawberry lemon lime'.split(' '); }) .filter('searchfilter',function() { return function (input,query) { return input.replace(RegExp('('+ query + ')','g'),'<span class="super-class">$1</span>'); } });
以上是大佬教程为你收集整理的javascript – AngularJS:过滤和粗体部分的结果全部内容,希望文章能够帮你解决javascript – AngularJS:过滤和粗体部分的结果所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。