CODEWITHSUNDEEP
javascripthtmlangularjsweb
hushed_voice
hushed_voice

Reputation: 3608

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

I am new to angular. I am following the following code to make a simple search.

<!DOCTYPE html>
<html ng-app=EmployeeApp>

  <head>
    <script data-require="[email protected]" data-semver="1.2.0-rc3" src="http://code.angularjs.org/1.2.0-rc.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="empCtrl">      
    <table>
        <tr>
            <td align="right">Search :</td>
            <td><input ng-model="query[queryBy]" /></td>
        </tr>           
        <tr>
            <td align="right">Search By :</td>
            <td>
                <select ng-model="queryBy">
                    <option value="$"></option>
                    <option value="name">NAME</option>
                    <option value="company">COMPANY</option>
                    <option value="designation">DESIGNATION</option>
                </select>   
            </td>
        </tr>
    </table>
    <hr>
    <div>
        <table>
            <tr>
                <th>Employee Name</th>
                <th>Company Name</th>
                <th>Designation</th>
            </tr>
            <tr ng-repeat="emp in employees | filter:query">
                <td>{{emp.name}}</td>
                <td>{{emp.company}}</td>
                <td>{{emp.designation}}</td>
            </tr>
        </table>
    </div>
  </body>

</html>

So far the search is working good but before i begin the search i am getting the result. 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?

Basically when the search box is empty nothing should be displayed.

Upvotes: 0

Views: 129

Answers (1)

Ankh
Ankh

Reputation: 5728

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.

Upvotes: 1

Related Questions