student student - 4 years ago 204
HTML Question

Input field filters not working in AngularJS

I have successfully implemented almost all types of filters in this fiddle:

<div data-ng-app='' data-ng-init="vehicles=[
AngularJS <a href=''>
Filters Example</a>

<p>Enter text
<input type='text' data-ng-model='abc' />
<p>The text you entered is
<br/> <a href=''>Upper case</a> {{ abc | uppercase }}
<br/><a href=''>Lower case</a> {{ abc | lowercase }}</p>Enter amount
<input type='number' data-ng-model='num1' />
<p>The <a href=''>amount</a> you entered is
<br/>{{ num1 | currency }}</p> <a href=''> Directives Filter example</a>

<br/>Vehicles filtered by type:
<ul data-ng-repeat="v in vehicles | orderBy:'type'">
<li>{{"Vehicle type is "+v.type +" with color "+ v.color}}</li>
<br/>Vehicles <a href=''>filtered by user input:</a>

<input type="text" ng-model='test' />
<ul data-ng-repeat="v in vehicles | filter: 'test' | orderBy:'type'">
<li>{{"Vehicle type is "+v.type +" with color "+ v.color}}</li>

Everything is working except input filters.

This is how I'm seeing it now:

no output

Why is the array not printed and filtered by user input?

Answer Source

Remove the single quotes from 'test' passed to the filter. Since it is not a string, its a model and it should be passed directly to the filter.

<ul data-ng-repeat="v in vehicles | filter: test | orderBy:'type'">
    <li>{{"Vehicle type is "+v.type +" with color "+ v.color}}</li>

The above code will work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download