Question

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

Contains
Equals
Starts with
Ends with
Does not contain

然后还有一个文本字段。文本字段将根据之前的下拉列表中的内容充当搜索字段。最后，当您单击“过滤器”按钮时，实际上会进行过滤。 因此，如果我在文本字段中输入'foo'，然后在下拉列表中选择'结束'，然后点击'过滤'，则列表应仅显示以'foo'结尾的条目。 < / p>

您可以看到codepen 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.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

多输入自定义AngularJS过滤器

1 个答案: