如何用多维数组列表突出显示AngularJs 1.4.8中的搜索文本？

Question

这是我的三个文件：.html，.js和.json文件

目前，我可以从JSON数据中获取和搜索，但是无法突出显示搜索到的数据。 我也没有收到任何错误，但是，我无法进一步实施。

我已经在这篇文章中附加了所有必需的文件。

var app = angular.module('myApp', ['ngSanitize']);
    app.controller('technologiesCtrl', function($scope, $http, $log, $location) {
        $http.get("../../angular/js/electrician.json").then(function(response) {
            $scope.myData = response.data.electrician;
            $log.info("new value:", $scope.myData);
            $scope.currentColor = "electrical";
        });
        $scope.currentSuburb = "Prospect"; 
    });
    app.config(function($sceProvider) {
      // Completely disable SCE.  For demonstration purposes only!
      // Do not use in new projects or libraries.
      $sceProvider.enabled(false);
    });

    app.filter('highlightMatch', function($sce) {
    return function(words, data) {
      return $sce.trustAsHtml(data ? words.replace(new RegExp(`(${data})`, 'i'), '<span class="highlighted">$1</span>') : words);
    }
});

JSON文件：

{
  "electrician": [
    {
      "title": {
          "name": "GENERAL ELECTRICAL",
          "bckColour": "electrical"
      },
      "img": "../../angular/images/electrical/general-electrical.jpg",
      "imgurl":"../../diagnose-repair-install/electrical-installations-prospect/",
      "item1": {
        "name": "Smoke Alarm Prospect",
        "url": "../../electrical/smoke-alarm-installation-prospect/"
      },
      "item2": {
        "name": "Power Points Prospect",
        "url": "../../electrical/power-points-installation-prospect/"
      },
      "item3": {
        "name": "3 in 1 Heater Fan Light Prospect",
        "url": "../../electrical/3-in-1-bathroom-heater-light-fan-prospect/"
      },
      "item4": {
        "name": "LED dimmers Propsect",
        "url": "../../electrical/led-dimmers-prospect/"
      }
    },
    {
      "title": {
        "name": "ELECTRICAL EMERGENCY",
        "bckColour": "electrical"  
      },
      "img": "../../angular/images/electrical/electrical-emergency.jpg",
      "imgurl":"../../diagnose-repair-install/electrical-installations-prospect/",
      "item1": {
        "name": "Power Failure Prospect",
        "url": "../../electrical/power-failure-prospect/"
      },
      "item2": {
        "name": "House Rewiring Prospect",
        "url": "../../electrical/house-rewiring-prospect/"
      },
      "item3": {
        "name": "Electrical Emergency",
        "url": "../../electrical/emergency-electrician-prospect/"
      },
      "item4": {
        "name": "Power Emergencies",
        "url": "../../electrical/power-failure-prospect/"
      }
    },
    {
      "title": {
        "name": "LIGHTING",
        "bckColour": "electrical" 
      },
      "img": "../../angular/images/electrical/lighting.jpg",
      "imgurl":"../../diagnose-repair-install/electrical-installations-prospect/",
      "item1": {
        "name": "LED Lighting Prospect",
        "url": "../../electrical/led-lighting-prospect/"
      },
      "item2": {
        "name": "Sensor Light Prospect",
        "url": "../../electrical/install-sensor-light-prospect/"
      },
      "item3": {
        "name": "Interior Lighting Prospect",
        "url": "../../electrical/interior-lighting-prospect/"
      },
      "item4": {
        "name": "Outdoor Lighting Prospect",
        "url": "../../electrical/outdoor-lighting-prospect/"
      }
    },
    {
      "title": {
        "name": "DATA & SECURITY",
        "bckColour": "data" 
      }, 
      "img": "../../angular/images/electrical/data&security.jpg",
      "imgurl":"../../diagnose-repair-install/digital-antennas-adelaide-prospect/",
      "item1": {
        "name": "Home Security Prospect",
        "url": "../../electrical/home-security-prospect/"
      },
      "item2": {
        "name": "Digital TV Reception Prospect",
        "url": "../../tv-and-data/digital-tv-reception-prospect/"
      },
      "item3": {
        "name": "Interior Lighting Prospect",
        "url": "../../tv-and-data/foxtel-for-multiple-rooms-prospect/"
      },
      "item4": {
        "name": "Digital TV Antennas Prospect",
        "url": "../../tv-and-data-prospect/"
      }
    },
    {
      "title": {
        "name": "ELECTRICAL SAFETY",
        "bckColour": "electrical" 
      }, 
      "img": "../../angular/images/electrical/electrical-safety.jpg",
      "imgurl":"../../diagnose-repair-install/electrical-installations-prospect/",
      "item1": {
        "name": "Safety Switch Prospect",
        "url": "../../electrical/safety-switch-installation-prospect/"
      },
      "item2": {
        "name": "Switchboard Upgrades Prospect",
        "url": "../../electrical/switchboard-upgrades-prospect/"
      },
      "item3": {
        "name": "Electrical Inspection Prospect",
        "url": "../../electrical/electrical-inspection-prospect/"
      },
      "item4": {
        "name": "Fuse Box Repairs Prospect",
        "url": "../../electrical/fuse-box-repairs-prospect/"
      }
    },
    {
      "title": {
        "name": "COMMERCIAL",
        "bckColour": "electrical" 
      },
      "img": "../../angular/images/electrical/commercial.jpg",
      "imgurl":"../../diagnose-repair-install/electrical-installations-prospect/",
      "item1": {
        "name": "Backup Generators Prospect",
        "url": "../../electrical/backup-generator-prospect/"
      },
      "item2": {
        "name": "Office Fitouts Prospect",
        "url": "../../electrical/office-fitouts-prospect/"
      },
      "item3": {
        "name": "Shop Fitouts Prospect",
        "url": "../../electrical/shop-fitouts-prospect/"
      },
      "item4": {
        "name": "UPS and Generators Prospect",
        "url": "../../electrical/ups-and-generators-prospect/"
      }
    },
    {
      "title": {
        "name": "CEILING FANS",
        "bckColour": "electrical" 
      }, 
      "img": "../../angular/images/electrical/ceiling-fan.jpg",
      "imgurl":"../../diagnose-repair-install/electrical-installations-prospect/",
      "item1": {
        "name": "Ceiling Fans Prospect",
        "url": "../../electrical/ceiling-fans-prospect/"
      },
      "item2": {
        "name": "Ventilation Prospect",
        "url": "../../electrical/ventilation-prospect/"
      },
      "item3": {
        "name": "Exhaust Fans Prospect",
        "url": "../../electrical/exhaust-fans-prospect/"
      },
      "item4": {
        "name": "Axial Fans Prospect",
        "url": "../../electrical/axial-fans-prospect/"
      }
    },
    {
      "title": {
        "name": "ELECTRIC COOKING",
        "bckColour": "electrical"  
      },
      "img": "../../angular/images/electrical/electric-cooking.jpg",
      "imgurl":"../../diagnose-repair-install/electrical-installations-prospect/",
      "item1": {
        "name": "Cooktop Installation Prospect",
        "url": "../../electrical/cooktop-installation-prospect/"
      },
      "item2": {
        "name": "Oven installation Prospect",
        "url": "../../electrical/oven-installation-prospect/"
      },
      "item3": {
        "name": "Electric Hotplates Prospect",
        "url": "../../electrical/electric-hotplates-prospect/"
      },
      "item4": {
        "name": "Oven Repairs Prospect",
        "url": "../../electrical/oven-repairs-prospect/"
      }
    }
  ]
}

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>
    <link href="https://fonts.googleapis.com/css?family=Exo+2" rel="stylesheet">
    <script src="../../angular/js/bootstrap.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="../../angular/js/sanitize.js"></script>
    <script src="../../angular/js/sanitize.min.js"></script>

    <!-- Bootstrap -->
    <link href="../../angular/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../angular/css/main.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<div ng-app="myApp" ng-controller="technologiesCtrl">
    <div class="container-fluid">
        <br/>
        <div class="container-fluid img-responsive heroImage">
            <h1 class="pageHeader">Electrical Master Menu - {{currentSuburb}}</h1>
        </div>
        <br/>
        <br/>
        <div class="container">
            <form class="form-inline text-center">
                <div class="row">
                    <div class="col-xs-12">
                        <span class="glyphicon glyphicon-search"></span>
                        <input type="text" class="form-control w-100 rounded" ng-model="comp" ng-change="item1=comp;item2=comp;item3=comp;item4=comp;title.name=comp; " ng-model="inputText" />
                        <div>
                            <small class="text-muted text-left">Search Keywords: Smoke alarm, Power point installation, Emergency, etc...</small>
                        </div>
                       <!-- <select name="show-filter" ng-model="catFilter" ng-options="category as categories for category in categories">
                        </select>-->
                    </div>
                </div>
            </form>

        </div>
        <br/>
        <div class="row">
            <div class="container">
                <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" ng-repeat="x in myData | filter: comp | filter: data" ng-bind-html="x.title.name  | highlightMatch:data">
                    <div id="jumbo" class="jumbotron text-center rounded-0">

                            <!--<p ng-class="(x.title.bckColour=== currentColor ? 'electrical' : 'data') + ' ' + (true ? 'electrical' : 'data')">{{x.title.name}}</p>-->
                            <a ng-href="/{{x.imgurl}}"><img class="img-responsive center-block" ng-src="{{x.img}}" /></a>
                            <p ng-class="(x.title.bckColour=='electrical') ? 'electrical center-block' : 'data center-block'">{{x.title.name}}</p>
                            <ul class="jumboBackground">
                                <a ng-href="/{{x.item1.url}}"><li>{{x.item1.name}}</li></a>
                                <a ng-href="/{{x.item2.url}}"><li>{{x.item2.name}}</li></a>
                                <a ng-href="/{{x.item3.url}}"><li>{{x.item3.name}}</li></a>
                                <a ng-href="/{{x.item4.url}}"><li>{{x.item4.name}}</li></a>
                                <a ng-href="https://sharpe-ers.com.au/book-easy" ng-class="(x.title.bckColour=='electrical') ? 'elecButton' : 'dataButton'"class=" btn-new center-block  btn-lg ">BOOK NOW</a>
                            </ul>
                        <!-- Button trigger modal -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

我没有使用ng-bind-html ='x.title.name'中的数组，而是使用ng-init指令创建了一个变量，并为其分配了数组属性。 下面是我如何在一个数组元素上执行此操作的方法：类似地，我对其他数组元素也进行了同样的操作。

这样的东西：HTML视图：

<p ng-class="(x.title.bckColour=='electrical') ? 'electrical center-block' : 'data center-block'" ng-init="text= x.title.name" ng-bind-html=" text | highlight:search" >{{x.title.name}}</p>

而且我已经编写了JS代码，该代码用span标签替换了搜索词，以添加背景色以突出显示搜索文本。 正如我们在JS文件中看到的那样。

 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) } }); 

 <div class="row"> <div class="container"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12" ng-repeat="x in myData | filter: search " > <div id="jumbo" class="jumbotron text-center rounded-0"> <!--<p ng-class="(x.title.bckColour=== currentColor ? 'electrical' : 'data') + ' ' + (true ? 'electrical' : 'data')">{{x.title.name}}</p>--> <a ng-href="/{{x.imgurl}}"><img class="img-responsive center-block" ng-src="{{x.img}}" /></a> <p ng-class="(x.title.bckColour=='electrical') ? 'electrical center-block' : 'data center-block'" ng-init="text= x.title.name" ng-bind-html=" text | highlight:search" >{{x.title.name}}</p> </div> </div> </div> </div>