Question

我正在寻找有关创建自定义过滤器的帮助，该过滤器适用于任何具有搜索属性的表。

到目前为止，我可以根据输入到每个列搜索栏的内容来对表进行过滤，但我无法弄清楚如何实现“启动”和“启动”。对于每一列也是如此，以便它只能找到佛罗里达州的＃39;如果你输入＆＃39; Flor＆＃39;或者＆＃39; Fl＆＃39;等等，而不是在打字时找到它＆＃39; lor＆＃39;或者＆＃39; ida＆＃39;。

我已经能够只使用一个自定义过滤器的列，但却失去了如何为多个列实现此功能。

以下是plunkr示例：http://plnkr.co/edit/CE3uhZmksiepmVL2bLNF?p=preview

脚本：

var app = angular.module("stateManagement", []);

app.controller("myCtrl", ["$scope", myCtrl]);

function myCtrl($scope) {
  $scope.names = [{
    Name: "Florida",
    Country: "USA"
  }, {
    Name: "Texas",
    Country: "USA"
  }]

  $scope.state = '';

  $scope.elements = [{
    state: "Florida"
  }, {
    state: "Texas"
  }];
}

app.filter('myfilter', function() {

  function strStartsWith(str, prefix) {
    return (str.toLowerCase() + "").indexOf(prefix.toLowerCase()) === 0;
  }


  return function(items, state) {


    var filtered = [];

    angular.forEach(items, function(item) {
      if (strStartsWith(item.state, state)) {
        filtered.push(item);
      }
    });

    return filtered;
  };

});

HTML：

<body ng-app='stateManagement' ng-controller='myCtrl'>
    <div class="col-md-12">
        <table class="table table-responsive">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Country</th>
                </tr>
                <tr>
                    <th><input class="form-control"
                               type="text"
                               placeholder="Search..."
                               ng-model="search.Name"/>
                    </th>
                    <th><input class="form-control"
                               type="text"
                               placeholder="Search..."
                               ng-model="search.Country"/>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in names | filter:search">
                    <td>{{ x.Name }}</td>
                    <td>{{ x.Country }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-12">
        <input ng-model="state">

        <table id="hotels">
            <tr data-ng-repeat="element in elements | myfilter:state">
                <td>{{element.state}}</td>
            </tr>
        </table>
        <br/>
    </div>
  </body>

提前感谢您的帮助！

每列AngularJS表自定义搜索过滤器

0 个答案: