javascript - 多输入自定义 AngularJS 过滤器

Question

我正在尝试构建自定义 Angular 过滤器。在我的示例代码中，它过滤了一个名称列表。过滤是通过带有以下选项的选择下拉列表完成的:

Contains
Equals
Starts with
Ends with
Does not contain

然后还有一个文本字段。文本字段将根据其前面的下拉列表中的内容充当搜索字段。最后，当您单击“过滤器”按钮时，过滤实际上发生了。 因此，如果我在文本字段中输入“foo”，然后在下拉列表中选择“结尾为”，然后单击“过滤器”，列表应该只显示以“foo”结尾的条目。

您可以看到代码笔 here .

这是我的 HTML:

<div ng-app="programApp" ng-controller="programController">
  <label>Name: 
    <select ng-model="filterDropdown">
      <option>Contains</option>
      <option>Equals</option>
      <option>Starts with</option>
      <option>Ends with</option>
      <option>Does not contain</option>
    </select>
    <input ng-model="inputField" type="text">
  </label>
  <button ng-click="runFilter()">Filter</button>
  <ul>
    <li ng-repeat="name in names | filter:filterName(name, filterDropdown, filterSearch)">{{name.name}}, <i>{{name.age}}</i></li>
  </ul>
</div>

然后，这是 Angular 过滤器(您可以在 the codepen 中找到更多 Angular 代码，但没有其他的):

angular.module('programApp.filters', []).filter('filterName', function(){
    return function(entries, filterDropdown, filterInput) {
        //Each of these if statements should check which dropdown option is selected and return filtered elements accordingly.
        if(filterDropdown == 'Contains'){
            return entries.name.match(filterInput);
        }else if(filterDropdown == 'Equals'){
            return entries.name.match(filterInput);
        }else if(filterDropdown == 'Starts with'){
            if(entries.name.indexOf(filterInput) === 0){
                return entries;
            };
        }else if(filterDropdown == 'Ends with'){
            if(entries.name.indexOf(filterInput, entries.name.length - filterInput.length) !== -1){
                return entries;
            };
        }else if(filterDropdown == 'Does not contain'){
            return entries.name.match(!filterInput);
        };
    };
});

这是我的简单函数，它在您单击“过滤器”时运行(意思是，当您在文本字段中键入时，它不会应用过滤器，直到您单击“过滤器”按钮)。

$scope.runFilter = function(){
  $scope.filterSearch = $scope.inputField;
};

但是，当我运行它时，我没有收到错误，但过滤器实际上没有做任何事情。我的自定义过滤器有什么问题？

Codepen Here .

Answer 1

1) 您的 HTML 过滤器语法不正确。您不要将 filter 放在开头，因为它已经是一个名为 filter 的现有 Angular 过滤器。把你做的那个放上去。然后参数用冒号分隔，第一个参数是整个数组，但它是隐含的，你不写进去。

ng-repeat="thing in things | filterName:filterDropdown:filterSearch"

2) 您正在尝试访问每个条目的属性，但您正在编写 entries.name。 entries 是您的数组，而不是每个项目，因此您必须遍历它们。 Angular 有一个漂亮的 angular.forEach(array, function (item, index) {...}) 正是为了这个目的。

3) 你的过滤器需要返回一个数组。在过滤器的开头实例化一个新数组，使用 forEach 遍历您的项目，如果该项目通过测试，则将其添加到数组，然后返回它。

Codepen