jimmy jose jimmy jose - 1 month ago 10
AngularJS Question

AngularJs Filter: Nothing should be displayed until i start a search

I am new to angular. I am following this http://plnkr.co/edit/XklvXtc1AZpndjLvXrh8?p=preview to make a simple search.
So far its working good. But i want it to display nothing until i start a search that is, only when i start typing i should get the filtered output. I don't need the whole data to be displayed beforehand. is there any way to do that?

<tr ng-repeat="emp in employees | filter:query">
<td>{{emp.name}}</td>
<td>{{emp.company}}</td>
<td>{{emp.designation}}</td>
</tr>


emp.name company designation etc should not be displayed when the search box is empty.

Answer

You can hide the table of data by watching the value of your search. You can use Angular's ng-show directive to display / hide your table.

ng-show="query[queryBy] !== undefined && query[queryBy] !== ''"

This works but it's not the cleanest approach. You could instead write a function in your controller that returns a boolean to determine if the search is empty or not. For example

ng-show="isSearchEmpty()"

http://plnkr.co/edit/5Wux1qbM1mwPNdA1sgiZ?p=preview

Here's an example of the first approach.

Comments