Редактируемый входной фильтр AngularJS

Question

У меня есть массив объектов, загруженных в 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.

Answer 1

Вы должны создать свой собственный фильтр $ и он проходит так, как вы хотите, фильтруется:

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

Для строгое comparaison вы можете использовать фильтр в html вот так:

{{filterExpression | filter: stringToCompare: true}} 

И startwith comparaison вы просто должны сделать такую ​​функцию:

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