angularjs diplay ui-grid data only after the filter data is entered

Question

I'm new to angularjs. I have a ui-grid that fetches UserId, first name and last name from the database and displays it on the grid I have kept enableFiltering: true so i am able to search the data from the grid.

Currently on pageload, all the database table data gets diplays on the ui-grid and i may search the text by entering filer.

However, i wanted to know if there is any way to hide the grid data on page load. And after i enter the text in the filter box, only the matching search data should display on the grid.

Thanks in advace!

Answer 1

You can do this by simply checking the searchText and the length of the result after filtering. Check the below plunker.

http://plnkr.co/edit/vGiNBRoSBomnDd1RhJuQ?p=preview

<div ng-if="searchText != '' && gridOpts.data.length > 0" id="grid1" ui-grid="gridOpts" class="grid">

        </div>

 $scope.searchText = "";

in the plunker example , if you enter input "Nephi" in the search box the grid will be displayed with the filtered data. If the input text does not retunr any data the grid will remain hidden.