CODEWITHSUNDEEP
javascripthtmlcssangularjs
olivier
olivier

Reputation: 2645

Hide a div with angular if the input field is empty

At the moment my code works if the view loads and there is no focus in the input field. The div is hidden with this code: 

<i class="icon ion-search placeholder-icon"></i>
      <input type="text" placeholder="Solothurn durchsuchen..." name="text" ng-model="searchBox.storeName">
    </label>
    <br><br>
    <div ng-repeat="item in posts | filter:searchBox" class="card has-header" ng-show="searchBox">
      <div class="w shop">{{item.storeName}}</div>
      <p class="w">

But my goal is, that when the user deletes the text in the input field the divs are again hidden. How can I do this? Any help much appreciated!

Upvotes: 0

Views: 4320

Answers (3)

Syam Pillai
Syam Pillai

Reputation: 5227

<div ng-repeat="item in posts | filter:searchBox" class="card has-header" ng-if="searchBox.storeName != null">

OR

<div ng-repeat="item in posts | filter:searchBox" class="card has-header" ng-if="searchBox.storeName">

Upvotes: 0

manish
manish

Reputation: 1458

just use ng-show="searchBox.storeName.length > 0" and that'll server your purpose

Upvotes: 1

asif308
asif308

Reputation: 90

try this

 <i class="icon ion-search placeholder-icon"></i>
          <input type="text" placeholder="Solothurn durchsuchen..." name="text" ng-model="searchBox.storeName">
        </label>
        <br><br>
        <div ng-repeat="item in posts | filter:searchBox" class="card has-header" ng-show="searchBox.storeName">
          <div class="w shop">{{item.storeName}}</div>
          <p class="w">

Upvotes: 0

Related Questions