I have simple question but i can't find answer so many hours...
I would like to make something like google search. If it's empty then only one styled input box is on center of the screen, but when typing some text inside, div with filtered ng-repeat is shown, and input is on the top of the page. That input is also filter.
It looks something like this, and that works, but i can't figure out how to change style of div that is parrent to input, based on input value, or more precisely if it is empty or not.
Also any more elegant solution to this would be appreciated.
<div ng-class="header">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-switch on="query">
<div ng-switch-when="">
</div>
<div ng-switch-default>
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>
Just use ng-show
, ng-hide
.
<div ng-class="{HeaderNoInput: query=='', HeaderHasInput: query!=''}">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-hide="query">Nothing to list.</div>
<div ng-show="query">
<div class="product_list">
<div ng-repeat="product in products | filter:query" class="product_block">
<p id="name">{{ product.name }}</p>
</div>
</div>
</div>