【发布时间】：2015-12-15 07:04:32
【问题描述】：
如何在 angularjs 中正确使用过滤器功能来突出显示我在文本框中输入的单词，然后突出显示我们输入的 JSON 中的所有单词。我有维度数组 JSON，它看起来像这样：
[
{
"id": "WEB1500001",
"tgl_opj": "2015-08-24",
"ket": "",
"tgl_jth_tempo": "2015-09-07",
"divisi": "MIYAKO ",
"soDetail":
[
{
"id": "WEB1500001",
"kd_brg": "KAS1618B ",
"harga": 216900,
"qty": 500,
"qty_si": 170
},
{
"id": "WEB1500001",
"kd_brg": "KAS1627KB ",
"harga": 257900,
"qty": 300,
"qty_si": 0
},
{
"id": "WEB1500001",
"kd_brg": "MCM-612 ",
"harga": 206400,
"qty": 400,
"qty_si": 300
},
{
"id": "WEB1500001",
"kd_brg": "MCM-507 ",
"harga": 228500,
"qty": 400,
"qty_si": 400
},
{
"id": "WEB1500001",
"kd_brg": "WD-189H ",
"harga": 157900,
"qty": 1050,
"qty_si": 300
},
{
"id": "WEB1500001",
"kd_brg": "WD-290HC ",
"harga": 303200,
"qty": 200,
"qty_si": 0
},
{
"id": "WEB1500001",
"kd_brg": "MCM-509 ",
"harga": 228500,
"qty": 200,
"qty_si": 100
},
{
"id": "WEB1500001",
"kd_brg": "MCM-838 ",
"harga": 243200,
"qty": 200,
"qty_si": 0
},
{
"id": "WEB1500001",
"kd_brg": "BL-101PL ",
"harga": 236000,
"qty": 240,
"qty_si": 0
},
{
"id": "WEB1500001",
"kd_brg": "BL-151GF ",
"harga": 298000,
"qty": 240,
"qty_si": 240
},
{
"id": "WEB1500001",
"kd_brg": "MCG-171 ",
"harga": 954800,
"qty": 50,
"qty_si": 20
},
{
"id": "WEB1500001",
"kd_brg": "MJG-201 ",
"harga": 870600,
"qty": 50,
"qty_si": 0
}
]
}
]
这是我使用 json 的方式，这是我的 app.js：
var app = angular.module('myApp', ['ngAnimate', 'ui.router', 'ui.bootstrap'])
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/Laporan_PO_OutStanding');
$stateProvider
.state('Laporan_PO_OutStanding', {
url: '/Laporan_PO_OutStanding',
templateUrl: 'pooutstanding/main',
controller : 'Hello'
})
.state('Laporan_PO_OutStanding.Laporan_PO_OutStanding_PartialDetails', {
templateUrl: 'pooutstanding/details',
});
});
app.controller('Hello', function($scope, $http, $state, $stateParams, $log) {
$("#navigationArea").hide();
$scope.isCollapsed = false;
$scope.tgl_awal = '2015-08-01';
$scope.tgl_akhir = '2015-08-31';
$scope.kd_dealer;
$scope.state = $state;
$scope.stateParams = $stateParams;
$scope.show = function show(){
$("#tbl").show(500);
$("#dateArea").show(500);
$("#navigationArea").hide(500);
}
$scope.selectPOoutStanding = function selectPOoutStanding(tgl_awal,tgl_akhir,kd_dealer){
$log.debug(tgl_awal);
$log.debug(kd_dealer);
$log.debug("hehe");
$http.get(urlLaporan + "/"+tgl_awal+"/"+tgl_akhir + "/" + kd_dealer)
.success(function(response){
$scope.listPOoutStandings = response;
});
};
});
app.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)
}
});
这是我的 index.html ：
<div class="table-responsive">
<table id="tbl" class="table">
<thead>
<tr>
<th></th>
<th>No PO</th>
<th>Tanggal PO</th>
<th>Tanggal Jatuh Tempo</th>
<th>Divisi</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="listPOoutStanding in listPOoutStandings | filter:search | orderBy:'id'" ng-bind-html="listPOoutStanding | highlight:search">
<td><a ui-sref=".Laporan_PO_OutStanding_PartialDetails" ng-click="selectSingleID(listPOoutStanding.id)" class="btn btn-info">Show Detail</a></td>
<td><a ng-click="isCollapsed = !isCollapsed" class="expandcollapse btn btn-mini btn-primary pull-center"><span class="glyphicon glyphicon-plus"></span> {{listPOoutStanding.id}}</a></td>
<td>{{listPOoutStanding.tgl_opj}}</td>
<td>{{listPOoutStanding.tgl_jth_tempo}}</td>
<td>{{listPOoutStanding.divisi}}</td>
</tr>
<tr ng-repeat-end="">
<td colspan="10" style="padding: 0">
<div collapse="isCollapsed">
<table class="table table-border">
<tr>
<td>No. PO</td>
<td>Kode Barang</td>
<td>Qty</td>
<td>Qty SI</td>
<td>Harga</td>
</tr>
<tr ng-repeat="details in listPOoutStanding.soDetail">
<td>{{ details.id }}</td>
<td>{{ details.kd_brg }}</td>
<td>{{ details.qty }}</td>
<td>{{ details.qty_si }}</td>
<td>{{ details.harga }}</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
这是我如何对突出显示的文本进行 css 处理，我将其设为黄色：
.highlighted { background: yellow }
它不会突出显示文本，它只是过滤 JSON 数据记录，但不会突出显示文本，我在这里错过了什么？
【问题讨论】：
标签： javascript angularjs json