Satyadev Satyadev - 6 months ago 8
AngularJS Question

Show results only on search in angular

I have my data coming in like this:

{
"owner" : {
"id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
},
"name" : "SampleProj",
"description" : "Sample proj desc",
"id" : "9be14f93-7c03-4391-98ad-9491594e4798",
"status" : "OPEN"
}
{
"owner" : {
"id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
},
"name" : "Analysis report",
"description" : "Analysis report",
"id" : "dac7c5c1-5046-4437-b092-",
"status" : "OPEN"
}


I am using the following to search the data and it is working fine but how do I show the results only on search(based on keyword)?

<div class="form-group">
<input class="form-control input_search_projects" type="text" ng-model="search" placeholder="Search Projects"/>
</div>

<div class="col-md-6">
<div class="list_projects_section_in_dashboard">
<ul style="list-style: none">
<li ng-repeat="wd in currentPageWorkOrders | filter:search">
<a href="">
<img src="./images/projectthumb.jpg" />
<h4>{{wd}}</h4>
</a>
<p>Publisher Name</p>
</li>
</ul>
</div>
</div>

Answer

You can add an ng-showdirective to the ul tag, like this:

<ul style="list-style: none" ng-show="search">
    <li ng-repeat="wd in currentPageWorkOrders | filter:search">
        <a href=""> 
            <img src="./images/projectthumb.jpg" />
            <h4>{{wd}}</h4>
        </a>
        <p>Publisher Name</p>
    </li>
</ul> 

The ng-show directive makes sure that the content won't be displayed until the model search has a non-empty string.