可编辑的 AngularJS 输入过滤器答案

【问题标题】：Editable AngularJS Input Filter可编辑的 AngularJS 输入过滤器
【发布时间】：2015-07-18 09:43:32
【问题描述】：

我已将一组对象加载到 ng 重复列表中。当用户单击“过滤器”按钮时，该列表会根据其上方输入字段中输入的值进行过滤。这很好用。但是，我还想要输入旁边的选择下拉菜单来编辑输入过滤器的效果。

换句话说，过滤器处理输入字段中的值的方式应该根据在它旁边的下拉列表中选择的选项而改变。

代码如下：

HTML：

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

角度：

angular.module('programApp', [
    'programApp.controllers',
]);
angular.module('programApp.controllers', [])
    .controller('programController', ['$scope', '$filter', '$http', 
    function($scope, $filter, $http){

      $scope.names = [{
            'name':'Fred',
            'age':'35 years'
        },{
            'name':'Alberta',
            'age':'46 years'
        },{
            'name':'Francis',
            'age':'31 years'
        },{
            'name':'Sarah',
            'age':'12 years'
        },{
            'name':'Matthew',
            'age':'16 years'
        },{
            'name':'Tracy',
            'age':'87 years'
        },{
            'name':'Jordan',
            'age':'35 years'
        },{
            'name':'Sam',
            'age':'26 years'
        },{
            'name':'Mason',
            'age':'38 years'
        },{
            'name':'Travis',
            'age':'11 years'
        },{
            'name':'Corey',
            'age': '86 years'
        },{
            'name':'Andrew',
            'age':'55 years'
        },{
            'name':'John',
            'age':'66 years'
        },{
            'name':'Jack',
            'age':'73 years'
        }];

      $scope.runFilter = function(){
        $scope.filterNameField = $scope.nameField;
      };

    }]);

因此，如果选择了Starts with，我希望输入按start with 进行过滤，如果选择了equals，则只应显示与输入完全匹配的结果，以此类推其他选项。我该怎么做？

查看等效的 Codepen here。

【问题讨论】：

标签： javascript html angularjs filter angularjs-filter

【解决方案1】：

您必须创建自己的 $filter 并让它以您希望的过滤方式传递：

HTML：

<li ng-repeat="name in names | myFilter:filterNameField:filterType">{{name.name}}, <i>{{name.age}}</i></li>

Javascript：

.$filter(function(){
    return function(input, name, type){
        //return based on name/type
    }
});

【讨论】：

【解决方案2】：

为了进行严格的比较，您可以像这样在 html 中使用过滤器：

{{filterExpression | filter: stringToCompare: true}}

为了开始比较，你只需要做一个这样的函数：

function(array,stringToCompare){
  if(array.startWith(stringToCompare) ==true) 
      Return whatYouNeed
};

【讨论】：