Question

如何在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>&nbsp;{{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数据记录，但它不会突出显示文本，我错过了什么？

Answer 1

filter 从html中删除数据。而不是使用 ng-class ，如：

<tr ng-repeat-start="listPOoutStanding in listPOoutStandings | orderBy:'id'" 
    ng-class="{'highlighted': listPOoutStanding.text == search}">
    <td>your tds</td>
</tr>

Answer 2

当行文本与文本框输入匹配时，必须使用ng-class和write表达式返回true。

<tr ng-repeat="employee in employeeList" ng-class="{match:empfind.length>0 &&employee.Name.toLowerCase().indexOf(empfind.toLowerCase())>=0}">

这是一个基于给定输入突出显示表行的示例。 http://dotnetlearners.com/blogs/view/242/Highlight-matched-table-rows-based-on-entered-text-in-a-textbox-using-angularjs.aspx

如何正确使用AngularJS中的过滤器来突出显示所有JSON中的单词？

2 个答案: