使用angularJS过滤器在搜索结果中突出显示搜索文本
问题描述:
我有一个输入框用于过滤显示的总体结果中的结果。我有一个过滤器'startWith'。 现在,我需要突出显示在 angularJS中显示的搜索结果中的搜索文本。使用angularJS过滤器在搜索结果中突出显示搜索文本
例如,当我在搜索框中键入'o'时,它应该突出显示橙色的'O'。
你能帮我实现吗?
这里是我的代码:
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.myData = [{
'name': 'Orange'
}, {
'name': 'Banana'
}, {
'name': 'Mango'
}, {
'name': 'Apple'
}, {
'name': 'Pineapple'
}];
$scope.startWith = function(actual, expected) {
var lowerStr = (actual + "").toLowerCase();
return lowerStr.indexOf(expected.toLowerCase()) === 0;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" />
<div id="childDiv">
<p ng-repeat="obj in myData | filter:search:startWith" >{{obj.name}}</p>
</div>
</div>
答
只需通过函数运行输出要检查你的搜索,并添加一个类来突出显示部分。道具是由于这个blog for the reg ex(我讨厌正则表达式,但他们的工作很好) 也google
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.myData = [{
'name': 'Orange'
}, {
'name': 'Banana'
}, {
'name': 'Mango'
}, {
'name': 'Apple'
}, {
'name': 'Pineapple'
}];
$scope.startWith = function(actual, expected) {
var lowerStr = (actual + "").toLowerCase();
return lowerStr.indexOf(expected.toLowerCase()) === 0;
}
$scope.highlight = function(text, phrase) {
if (phrase) {
text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
}
return text;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" />
<div id="childDiv">
<p ng-repeat="obj in myData | filter:search:startWith" >{{highlight(obj.name)}}</p>
</div>
</div>