表按谓词过滤

Question

我做了一个jsfiddle来表明我的问题。 fisrt部分正在以局部方式工作。请参阅第15行。我将谓词放在过滤器中（谓词是l_name）并且正在运行。该表按“姓氏”列进行过滤。

<tr ng-repeat="item in items | filter:{l_name:myInput}">

当我使用select（名为mySelect2的模型）来选择我要过滤的谓词时，样本的第二部分不起作用（参见第36行）。

我要做的是使用select来选择谓词列和要在该列中过滤的输入。

<tr ng-repeat="item in items | filter:{mySelect2:myInput2}">

我是否遗漏了某些内容或者select（mySelect2）的绑定必须更新表格中的过滤器？

感谢您的帮助！

PS：在输入中键入jo。

Answer 1

这里有一些选项：http://jsfiddle.net/jgoemat/tgKkD/1/

选项1 - 在多个字段中搜索

您可以使用模型上的对象（此处为“搜索”）作为过滤器，并为l_name和f_name分隔输入框。这样您不仅可以对两者进行过滤，还可以对两者进行过滤：

any: <input ng-model="search.$"/><br/>
l_name: <input ng-model="search.l_name"/><br/>
f_name: <input ng-model="search.f_name"/><br/>
<!-- skipping code -->
<tr ng-repeat="item in items|filter:search">

选项2 - 使用控制器上的功能

内置过滤器可以将函数作为参数，如果应包含该对象，则该参数应返回true。此函数将要过滤的对象作为其唯一参数，如果应包含该参数，则返回true。 HTML：

<tr ng-repeat="item in items|filter:filterFunc">

控制器功能：

$scope.filterFunc = function(obj) {
    // property not specified do we want to filter all instead of skipping filter?
    if (!$scope.mySelect)
        return obj;

    if (obj[$scope.mySelect].toLowerCase().indexOf($scope.myInput.toLowerCase()) >= 0)
        return obj;
    return false;
};

选项3 - 创建自定义过滤器

此过滤器函数将整个列表作为参数并返回已过滤的列表。这需要您创建角度模块并在ng-app标记中指定它，如ng-app="MyApp" Html：

<tr ng-repeat="item in items|MyFilter:mySelect:myInput">

代码：

var app = angular.module('MyApp', []);
app.filter('MyFilter', function() {
    return function(list, propertyName, value) {
        console.log('MyFilter(list, ', propertyName, ', ', value, ')');
        // property not specified do we want to filter all instead of skipping filter?
        if (!propertyName)
            return list;

        var newList = [];
        var lower = value.toLowerCase();
        angular.forEach(list, function(v) {
            if (v[propertyName].toLowerCase().indexOf(lower) >= 0)
                newList.push(v);
        });
        return newList;
    }
});

选项4：ng-show

内置的filter过滤器表达式不允许您使用任何表达式，但ng-show这样做可以限制可见项目，如下所示：

<tr ng-show="item[mySelect].toLowerCase().indexOf(myInput.toLowerCase()) >= 0 || !mySelect" ng-repeat="item in items">

---

我认为选项1简单灵活。如果您更喜欢下拉+字段UI，那么我认为选项3是最有用的，您可以将其重新用作其他应用程序中的依赖项：

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

我只想把它命名为'filterByNamedProperty'。选项2很简单，但它与您的控制器相关联。选项4很乱，我不会用它。

Answer 2

使用自定义过滤器怎么样？用户将属性与标准连接（例如last：jo）。在过滤器中，拆分冒号，并使用第一部分作为属性名称，第二部分作为标准。

Answer 3

您可以将范围变量传递给过滤器：

<tr ng-repeat="item in items | filter:myScopeVariable">

这意味着您可以在控制器中定义过滤器对象，过滤器将使用它：

$scope.$watch('mySelect2', function(val){
  $scope.myScopeVariable = {};
  $scope.myScopeVariable[val] = $scope.myInput2;
});

$scope.$watch('myInput2', function(val){
  $scope.myScopeVariable = {};
  $scope.myScopeVariable[$scope.mySelect2] = $scope.myInput2;
});

Demo Fiddle