Editable AngularJS Input Filter

Question

I've got an array of objects loaded into an ng-repeated list. That list is filtered based on the value entered in an input field just above it when a user clicks the 'filter' button. That works fine. However, I also want a select dropdown next to the input to edit the effects of the input filter.

In other words, the way the filter handles the value in the input field should change based on what option is selected in the dropdown next to it.

Here's the code:

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

    }]);

So, if Starts with is selected, I want the input to filter by start with, and if equals is selected, only results matching the input exactly should be shown, and so on with the other options. How do I do this?

See equivalent Codepen here.

Mathew Berg · Accepted Answer · 2015-05-07 17:16:18Z

1

You'll have to create your own $filter and have it pass in the way you want it filtered:

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

answered May 7, 2015 at 17:16

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CuriousMind · Accepted Answer · 2015-05-07 17:47:47Z

0

For strict comparaison you can use filter in html like this:

{{filterExpression | filter: stringToCompare: true}}

And for startwith comparaison you just have to make a function like this:

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

edited May 7, 2015 at 17:47

CuriousMind

3,1833 gold badges31 silver badges59 bronze badges

answered May 7, 2015 at 17:18

carton

1,1689 silver badges17 bronze badges

Collectives™ on Stack Overflow

Editable AngularJS Input Filter

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related