var app = angular.module('app',['ngSanitize']);
app.controller('searchCtrl',['$scope', function($scope){
$scope.searchContents = [
{
title: 'Hedng one',
disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
title: 'Heading tow',
disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
disc_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
disc_3: 'lorem lorem lorem'
},
{
title: 'Heding three',
disc_1: 'discription..............................................'
},
{
title: 'Heding four',
disc_1: 'discription..............................................'
}
];
}]);
app.filter('highlight', function () {
return function (text, search, caseSensitive) {
if (text && (search || angular.isNumber(search))) {
text = text.toString();
search = search.toString();
if (caseSensitive) {
return text.split(search).join('<span class="ui-match">' + search + '</span>');
} else {
return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
}
} else {
return text;
}
};
});/* Generated by less 2.5.1 */
.ui-match {
background: #FFC107;
color: #fff;
}
.side-panel.panel-open {
transform: translateX(0%);
display: block;
}
.side-panel li {
float: left;
width: 100%;
}
.side-panel.side-panel-singlar {
z-index: 10;
}
.search-results > ul {
list-style: none;
padding: 0;
margin: 5%;
}
.search-results > li {
line-height: 1.3em;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="js/style.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-app="app" ng-controller="searchCtrl">
<div class="side-panel-singla">
<input type="text" class="input-search" placeholder="Search..." ng-model="searchText" />
<button class="btn-search">search</button>
<div ng-repeat="searchContent in searchContents | filter:searchText">
<ul>
<li>
<h3 ng-bind-html="searchContent.title | highlight:searchText"></h3>
<p ng-bind-html="searchContent.disc_1 | highlight:searchText"></p>
<p ng-bind-html="searchContent.disc_2 | highlight:searchText"></p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
以下是针对您的案例的非常具体的解决方案。我在样式表中添加了一个名为hastext的类，然后我在段落<div>
<p>s添加了一个长ng类指令
很不错，因为它会利用您的高亮过滤器，将过滤后的文本与原始文本进行比较，如果存在差异（如果找到任何插入的<span>s），则将其设置为true 。但是，如果添加更多段落，则还必须在该ng-class调用中添加其他行。
var app = angular.module('app',['ngSanitize']);
app.controller('searchCtrl',['$scope', function($scope){
$scope.searchContents = [
{
title: 'Hedng one',
disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
},
{
title: 'Heading tow',
disc_1: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
disc_2: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
disc_3: 'lorem lorem lorem'
},
{
title: 'Heding three',
disc_1: 'discription..............................................'
},
{
title: 'Heding four',
disc_1: 'discription..............................................'
}
];
}]);
app.filter('highlight', function () {
return function (text, search, caseSensitive) {
if (text && (search || angular.isNumber(search))) {
text = text.toString();
search = search.toString();
if (caseSensitive) {
return text.split(search).join('<span class="ui-match">' + search + '</span>');
} else {
return text.replace(new RegExp(search, 'gi'), '<span class="ui-match">$&</span>');
}
} else {
return text;
}
};
});/* Generated by less 2.5.1 */
.ui-match {
background: #FFC107;
color: #fff;
}
.side-panel.panel-open {
transform: translateX(0%);
display: block;
}
.side-panel li {
float: left;
width: 100%;
}
.side-panel.side-panel-singlar {
z-index: 10;
}
.search-results > ul {
list-style: none;
padding: 0;
margin: 5%;
}
.search-results > li {
line-height: 1.3em;
}
.paragraphs {
height: 0;
overflow-y: hidden;
}
.paragraphs.hastext
{
height: auto;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet" type="text/css" href="js/style.css">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div ng-app="app" ng-controller="searchCtrl">
<div class="side-panel-singla">
<input type="text" class="input-search" placeholder="Search..." ng-model="searchText" />
<button class="btn-search">search</button>
<div ng-repeat="searchContent in searchContents" >
<ul>
<li>
<h3 ng-bind-html="searchContent.title | highlight:searchText" ></h3>
<div class="paragraphs" ng-class="{'hastext' : ((searchContent.title | highlight:searchText) != searchContent.title ||
(searchContent.disc_1 | highlight:searchText) != searchContent.disc_1 ||
(searchContent.disc_2 | highlight:searchText) != searchContent.disc_2
)}">
<p ng-bind-html="searchContent.disc_1 | highlight:searchText"></p>
<p ng-bind-html="searchContent.disc_2 | highlight:searchText"></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>