how we can implement Customized filters in angular js

See more:

bootstrap

AngularJs

Develop a filter directive that looks like the following graphic:

The behavior is as described:
• The first line is dynamically generated text
• The underlined text is filter criteria. When a mouse hovers over it, an icon with a “x” marking is displayed. When clicking the “x” icon, the filter criteria is removed
• You can add multiple criteria to the filter. They will show up with a “and”, for example:
Showing results where description contains “X” and title starts with “U”
• The second line displays the criteria building:
o The first dropdown shows the available fields
o The second dropdown shows the filters applicable to the selected field (each field has different criteria)
o The third input box shows the input depending on the selected criteria (e.g. text input or number input)
• Add a “Filter” button at the end to accept the additional criteria