AngularJS Filter text by a selection on the dropdown

Question

How would I be able to search or filter by the selection on the "By"? Let's say I have a list of TV shows that displays the title and the year. I then have a search functionality in which I have the option to choose whether to search by the title or by the year which could be found on the "By" drop down.

I have attached a JS fiddle for this here. I am able to filter it by title but this is not how I wanted it to happen since I want it to be more dynamic base on the user's selection:

<input type="text" class="form-control" ng-model="main.searchInput.title">

HTML:

        <div ng-app="app" class="container">
        <div class="row" ng-controller="SearchFilterOrderController as main">
            <div class="col-md-12">
                <div class="page-header"><h3>{{main.title}}</h3></div>
                <div class="row">
                    <div class="col-md-6">
                        <h4>A list of TV shows</h4>
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat="show in main.shows | filter:main.searchInput | orderBy:main.order.key:main.order.reverse"><span class="glyphicon glyphicon-star" ng-if="show.favorite"></span> {{show.title}} <span class="badge">{{show.year}}</span></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h4>Search Text</h4>
                        <div class="input-group">
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-search"></span>
                            </span>
                            <input type="text" class="form-control" ng-model="main.searchInput.title">
                        </div>

                        <h4>By</h4>
                        <div class="input-group">
                            <select class="form-control pull-right" ng-model="main.filter" ng-options="filter as filter.desc for filter in main.filterBy"></select>
                        </div>

                        <h4>Order</h4>
                        <select class="form-control pull-right" ng-model="main.order" ng-options="order as order.title for order in main.orders"></select>
                    </div>
                </div>
            </div>
        </div>
    </div>

AngularJS:

    var app = angular.module('app', []);

app.controller('SearchFilterOrderController', function() {
    var vm = this;
    vm.title = 'Search, Filter and Order By';
    vm.searchInput = '';
    vm.shows = [
        {
            title: 'Game of Thrones',
            year: 2011,
            favorite: true
        },
        {
            title: 'Walking Dead',
            year: 2010,
            favorite: false
        },
        {
            title: 'Firefly',
            year: 2002,
            favorite: true
        },
        {
            title: 'Banshee',
            year: 2013,
            favorite: true
        },
        {
            title: 'Greys Anatomy',
            year: 2005,
            favorite: false
        }
    ];
    vm.filterBy = [
        {
            code: 'title',
            desc: 'Title'
        },
        {
            code: 'year',
            desc: 'Year'
        }
    ];
    vm.orders = [
        {
            id: 1,
            title: 'Year Ascending',
            key: 'year',
            reverse: false
        },
        {
            id: 2,
            title: 'Year Descending',
            key: 'year',
            reverse: true
        },
        {
            id: 3,
            title: 'Title Ascending',
            key: 'title',
            reverse: false
        },
        {
            id: 4,
            title: 'Title Descending',
            key: 'title',
            reverse: true
        }
    ];
    vm.order = vm.orders[0];
});

Answer 1

You can create a custom filter for example:

app.filter('customFilter', function() {
    return function(arr, by, value) {       
        return !value ? arr : arr.filter(function(elem) {
            return elem[by.code].toString().toLowerCase().indexOf(value.toLowerCase()) >= 0; 
        })
    }
});

And use it instead the another:

<li class="list-group-item" ng-repeat="show in main.shows | customFilter:main.filter:main.searchInput | orderBy:main.order.key:main.order.reverse">

I changed the name of the searchInput variable (Removed the title part). And initialize the filter to default use the title.

Here is your fiddle with the modifications: https://jsfiddle.net/marduke182/4wbj3oue/3/