0

您好，我想创建简单的数据搜索表。我想突出显示数据是否与用户类型输入匹配。我是通过下面的文档完成的，因为我开始使用 angular 我想知道有没有更好的方法？一些自定义过滤器可能吗？

    <!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html ng-app="myApp">
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
    <style type="text/css">
      table td{
        padding: 5px;
      }
      .true{
        color: green;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div ng-controller="filtrController">
      <div>{{search}}<hr/></div>
      <input type="text" ng-model="search"/>
      <table>
        <thead>
          <tr>
            <td>Name:</td>
            <td>Param1:</td>
            <td>Param2:</td>
         </tr>
        </thead>
        <tbody>
          <tr ng-repeat="foo in data | filter:search">
            <!--<td ng-class="{true:'true',false:''}[search === foo.Name]">{{foo.Name}}</td>-->
            <td ng-class="customFilter(search,foo.Name)">{{foo.Name}}</td>
            <td ng-class="customFilter(search,foo.param1)">{{foo.param1}}</td>
            <td ng-class="customFilter(search,foo.param2)">{{foo.param2}}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script type="text/javascript">
        var myApp = angular.module('myApp',[]);
        myApp.controller('filtrController',function ($scope)
        {
          $scope.customFilter = function(search,searchTo)
          {
            if(search != '')
            {
              if(searchTo.indexOf(search) > -1) return 'true';
              return '';
            }
          };
          $scope.data =
                  [
                    {
                      Name:'name foo1',
                      param1:'param of foo1',
                      param2:'param 2 of foo1'
                    },
                    {
                      Name:'name foo2',
                      param1:'param of foo2',
                      param2:'param 2 of foo2'
                    },
                    {
                      Name:'name sfoo3',
                      param1:'param of foo3',
                      param2:'param 2 of foo3'
                    },
                  ]
        });


    </script>
  </body>

4

1 回答 1

1

您只需要像这样自定义过滤器：

$scope.customFilter = function(data, searchFor) {
  if (angular.isUndefined(data) || angular.isUndefined(searchFor)) return data;
  angular.forEach(data, function(item) {
    if(angular.equals(item, searchFor)) item.highlighted = true;
  });
  return data;
}

和这样的html

<tr ng-repeat="foo in data | customFilter:{something:1}" ng-class="{highlighted: foo.highlighted}">

更新：

所以，我只需要更详细地解释我的方法。您有一些数据需要突出显示。因此，如果属性设置为 true，您需要在数据中设置新属性并突出显示它（使用 css 和 ng-class）。要设置此属性，您可以创建自定义过滤器，该过滤器采用您的数据数组，通过设置此属性更改其内部状态并返回此数组作为结果。这就是我为你实现的。

更新#2

需要与 ng-filter 相同的行为。所以就在这里。

于 2014-06-23T18:15:17.877 回答