StackOverflow_25367524: how-can-you-filter-objects-by-an-array-in-angularjs

Illustration of answer to http://stackoverflow.com/questions/25367524/how-can-you-filter-objects-by-an-array-in-angularjs.

by ExpertSystem

HTML

<script src="http://code.angularjs.org/1.2.22/angular.min.js"></script>
<div ng-controller="mainCtrl">
    <h4>Search</h4>
    <label>
        Book name:
        <input type="search" ng-model="filterObj.bookname" />
    </label>
    <label>
        Year:
        <input type="search" ng-model="filterObj.year" />
    </label>
    <br />
    <label>
        Filter by:
        <input type="search" ng-model="dynamicField"
               placeholder="Field to filter by" />
        <input type="search" ng-model="filterObj[dynamicField]"
               placeholder="Value to filter by" />
    </label>
    <hr />
    <h4>Books</h4>
    <ol>
        <li ng-repeat="book in books | filter:filterObj">
            <b>{{book.bookname}}</b> ({{book.year}}) by {{book.author}}
        </li>
    </ol>
</div>

<!-- -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- -->
<!-- Page Footer -->
<small class="footer" ng-controller="footerCtrl">
    <b>Angular v{{version.full}}</b> ({{version.codeName}})
    <span class="right">
        &copy; <a ng-href="{{authorUrl}}" target="_blank">ExpertSystem</a>
    </span>
</small>

CSS

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
body { padding-bottom: 22px; }
.footer { background-color: White; border-top: 1px solid rgba(100, 100, 100, 0.33); bottom: 0; display: block; font-size: 0.75em; height: 20px; left: 0; margin: 0 10px; overflow: auto; padding: 5px 0; position: fixed; right: 0; }
.right { float: right; }

JavaScript

var app = angular.module('myApp', []);
app.controller('mainCtrl', function ($scope) {
    $scope.books = [{
        bookname: 'harryporter',
        year:     '2000',
        author:   'J. K. Rowling'
    }, {
        bookname: 'Sleepless',
        year:     '2003',
        author:   'Connie Ann Michael'
    }, {
        bookname: 'No man\'s land',
        year:     '1993',
        author:   'Harold Pinter'
    }];
});

/* -=-=-=-=- -=[IGNORE BELOW THIS LINE]=- -=-=-=-=- */
/* Page Footer */
app.controller('footerCtrl', function ($scope) {
    $scope.authorUrl = '//stackoverflow.com/users/2341938/expertsystem';
    $scope.version   = angular.version;
});