Question

我在Angular中有一个简单的表：

<table>
    <tr ng-repeat="row in $data">
        <td>{{row.name}}</td>
        <td>{{row.surname}}</td>
    </tr>
</table>

会产生这样的东西：

<table>
    <tr>
        <td>Johnathan</td>
        <td>Smith</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>Doe</td>
    </tr>
</table>

但我有一个动态搜索功能，可以重新加载表格，我需要在结果中突出显示搜索字符串（搜索词是“John”）：

<table>
    <tr>
        <td><span class="red">John</span>athan</td>
        <td>Smith</td>
    </tr>
</table>

现在我希望这样的事情可行：

<table>
    <tr ng-repeat="row in $data">
        <td>{{myFunction(row.name)}}</td>
        <td>{{row.surname}}</td>
    </tr>
</table>

但事实并非如此。有什么方法可以做到这一点吗？

更新：已解决，@loan提出的解决方案适用于此案例。

Answer 1

正如您在下面的示例中所看到的，您可以执行类似的操作。

Example

在现有循环中，您可以按如下方式添加自定义过滤器：

<body ng-controller="TestController">
  <h1>Hello Plunker!</h1>
  <input type="text" ng-model="query" />

  <ul>
    <li ng-repeat="item in data | filter:query">
      <!-- use the custom filter to highlight your queried data -->
      <span ng-bind-html="item.name | highlight:query"></span>
    </li>
  </ul>
</body>

在JavaScript文件中，您可以创建自定义过滤器：

(function() {
  'use strict';

  angular.module("app", []);

  //to produce trusted html you should inject the $sce service
  angular.module("app").filter('highlight', ['$sce', function($sce) {

    function escapeRegexp(queryToEscape) {
      return queryToEscape.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
    }

    return function(matchItem, query) {
      return $sce.trustAsHtml(query ? ('' + matchItem).replace(new RegExp(escapeRegexp(query), 'gi'), '<strong>$&</strong>') : matchItem);
    };
  }]);

  angular.module("app")
    .controller('TestController', ['$scope',
      function($scope) {

        $scope.query = ""; //your scope variable that holds the query

        //the dummy data source
        $scope.data = [{
          name: "foo"
        },{
          name: "bar"
        },
        {
          name: "foo bar"
        }];
      }
    ]);

})();

如果您愿意，可以使用您的值替换过滤器中的html：

<strong>$&</strong>

到

<span class="red">$&</span>

Answer 2

使用ng-class，因此你的td的html变为

<td ng-class = "{red: row.name == searchStr}">{{row.name}}</td>

还有其他格式的ng-class和我的html可能很狡猾我主要使用haml但查看ng-class上的文档

Answer 3

您可以使用 angular-ui's highlight 模块。您可以像这样使用它：

<强> DEMO

<强> HTML

    <div>
      <input type="text" ng-model="searchText" placeholder="Enter search text" />
    </div>
    <input type="checkbox" ng-model="caseSensitive" /> Case Sensitive?

      <table>
      <tbody>
        <tr ng-repeat="row in $data">
          <td ng-bind-html="row.name | highlight:searchText:caseSensitive"></td>
          <td>{{row.surname}}</td>
        </tr>
      </tbody>
    </table>

您可以通过凉亭下载，其说明在 github page 中提供。

注意：添加角度 ngSanitize 以避免$sce不安全错误。

AngularJS：修改ng-repeat中的值

3 个答案: