我目前有一个文本字段,根据匹配使用title
或name
键进行过滤。过滤器以黄色突出显示它找到的文字字段匹配的单词。例如,如果name
匹配,则item.nombre
会突出显示。
<input type="text" placeholder="Search" ng-model="search">
<ul>
<!-- filter code -->
<li ng-repeat="item in data ">
<span ng-bind-html="item.title +' '+ item.name | highlight:search"></span>
<!--
I need this structure:
<p><span>Title: </span><span>{{item.title}}</span></p>
<p><span>Name: </span><span>{{item.name}}</span></p>-->
</li>
</ul>
$scope.data = [{
title: "Bad",
name: 'bill'
},
{
title: "Good",
name: 'Goe'
}]
这是我目前的代码并且有效。
$scope.data = [
{ text: "<< ==== Put text to Search ===== >>" }
];
$scope.data = [{
title: "Bad",
name: 'bill'
}, {
title: "Good",
name: 'Goe'
}, {
title: "Great",
name: 'Brad'
}, {
title: "Cool",
name: 'yan'
}, {
title: "Excellent",
name: 'mikle'
}, {
title: "Awesome",
name: 'mosa'
}, {
title: "Horrible",
name: 'morteza'
} ];
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
https://plnkr.co/edit/GtOnj4KAkqv688PRSH0e?p=preview
显示过滤的信息是这样的:
<span ng-bind-html="item.title +' '+ item.name | highlight:search"></span>
我希望执行相同的过滤器,但结构如下:
<p><span>Title: </span><span>{{item.title}}</span></p>
<p><span>Name: </span><span>{{item.name}}</span></p>
如果要在title
或name
键中搜索文本字段中的匹配项,但希望在我所需的结构下
如何隐藏没有巧合的对象呢? (目前全部显示)
答案 0 :(得分:1)
嗯,以下工作:
<li ng-repeat="item in data">
<p><span>Title: </span><span ng-bind-html="item.title | highlight:search"></span></p>
<p><span>Name: </span><span ng-bind-html="item.name | highlight:search"></span></p>
</li>
以下是工作示例:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = [{
text: "<< ==== Put text to Search ===== >>"
}];
$scope.data = [{
title: "Bad",
name: 'bill'
}, {
title: "Good",
name: 'Goe'
}, {
title: "Great",
name: 'Brad'
}, {
title: "Cool",
name: 'yan'
}, {
title: "Excellent",
name: 'mikle'
}, {
title: "Awesome",
name: 'mosa'
}, {
title: "Horrible",
name: 'morteza'
}];
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
});
.highlighted {
background: yellow
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.6.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h1>Highlight text using AngularJS.</h1>
<div class="container">
<input type="text" placeholder="Search" ng-model="search">
<ul>
<!-- filter code -->
<li ng-repeat="item in data">
<p><span>Title: </span><span ng-bind-html="item.title | highlight:search"></span></p>
<p><span>Name: </span><span ng-bind-html="item.name | highlight:search"></span></p>
</li>
</ul>
</div>
</body>
</html>