可编辑 AngularJS 输入过滤器

Question

我已经将一组对象加载到 ng-repeated 列表中。当用户单击 'filter' 按钮时，该列表将根据其上方输入字段中输入的值进行过滤。那很好用。但是，我还想要输入旁边的 select 下拉菜单来编辑输入过滤器的效果。

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

代码如下：

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:

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 是 selected，我希望输入按 start with 过滤，如果 equals 是 selected，仅应显示与输入完全匹配的结果，依此类推其他选项。我该怎么做？

参见等效的 Codepen here。

Answer 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
    }
});

Answer 2

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

{{filterExpression | filter: stringToCompare: true}}

而对于开始比较，您只需创建如下函数：

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

可编辑 AngularJS 输入过滤器

Editable AngularJS Input Filter

html

javascript

filter

angularjs

angularjs-filter