如何在 angularjs 中创建搜索过滤器和文本突出显示答案

【问题标题】：how to create search filter and text highlight in angularjs如何在 angularjs 中创建搜索过滤器和文本突出显示
【发布时间】：2016-03-21 17:09:39
【问题描述】：

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>

它工作正常，但我希望对其进行一些改进我的要求是默认情况下仅显示标题，当用户开始搜索时，如果在段落中搜索文本恶魔，它应该展开，否则不花费小提琴演示为this example，但它使用剑道我想要它在 angularjs 请帮助

【问题讨论】：

标签： javascript jquery html css angularjs

【解决方案1】：

以下是针对您的案例的非常具体的解决方案。我在样式表中添加了名为hastext 的类，然后在<p>s 段落周围的新<div> 中添加了一个长的ng-class 指令

这很好，因为它利用了您的高亮过滤器，将过滤后的文本与原始文本进行比较，如果有差异（如果它找到任何插入的 <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>

【讨论】：