Javascript 多输入自定义AngularJS过滤器

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

Contains
Equals
Starts with
Ends with
Does not contain

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

你可以看到一个密码笔

这是我的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>

这是我的一个简单函数，当你点击“过滤器”时运行（也就是说，当你在文本字段中键入内容时，它在你点击“过滤器”按钮之前不会应用过滤器）

但是，当我运行它时，我不会得到错误，但是过滤器实际上什么都不做。我的自定义过滤器有什么问题？

.

1）您的HTML筛选器语法不正确。您不会在开始时放置

过滤器

，因为它已经是一个名为

过滤器

的现有角度过滤器。把你做的那个放进去。参数之间用冒号分隔，第一个参数是整个数组，但它是隐含的，您不需要写入它

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

2） 您试图访问每个条目的属性，但正在写入

条目。name

<代码>条目是您的数组，而不是每个条目，因此您必须对它们进行迭代。Angular有一个漂亮的

Angular.forEach（数组、函数（项、索引）{…}）

，正是为了这个目的

3） 您的筛选器需要返回一个数组。在过滤器的开头实例化一个新数组，使用

forEach

对项目进行迭代，如果项目通过测试，则将其添加到数组中，然后返回

---

这非常有用。非常感谢。

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

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