我有一个过滤器来标记巧合,但我想修改它的显示方式

时间:2018-04-11 04:51:17

标签: angularjs

我目前有一个文本字段,根据匹配使用titlename键进行过滤。过滤器以黄色突出显示它找到的文字字段匹配的单词。例如,如果name匹配,则item.nombre会突出显示。

enter image description here

enter image description here

  <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>

如果要在titlename键中搜索文本字段中的匹配项,但希望在我所需的结构下

,我希望它以黄色突出显示

如何隐藏没有巧合的对象呢? (目前全部显示)

1 个答案:

答案 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>