I need to hide a div(class "card") until the user enters text into the textfield.
I'm using angularJS for my app. I guess i have to use ng-showbut how can I get this to work? I appreciate your help.
This is my code:
<input type="text" ng-model="searchBox" class="search1" placeholder="Suchen...">
<div ng-repeat="item in posts | filter:searchBox" class="card">
<h3 class="w">{{item.storeName}}</h3>
[...]
You can simply set ng-show equal to the model value. When it's empty ng-show will evaluate to false and hide the div. When the input has a value ng-show will evaluate to true and show the div.
<div ng-repeat="item in posts | filter:searchBox" class="card" ng-show="searchBox">
add ng-show or ng-if to the element you want to show after value is entered
<div ng-repeat="item in posts | filter:searchBox" class="card" ng-if="searchBox">
or you can wrap this div with another div
<div ng-if="searchBox">
<div ng-repeat="item in posts | filter:searchBox" class="card">
but you do not have to do this... given that the filter will give results only if there is any value matching as per the searchBox, hence if there are not values, ng-repeat will not create any element
ng-if and ng-show. if i have to make a choice, i do generally prefer to use ng-if over ng-show/ng-hide