Hide a div with angular if the input field is empty

Question

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!

ng-show="searchBox.storeName"

Tushar
– Tushar

2016-04-19 11:31:48 +00:00
Commented Apr 19, 2016 at 11:31 — Tushar
– Tushar, Commented Apr 19, 2016 at 11:31
ng-show directive using searchBox.storeName.length ?

Rayon
– Rayon

2016-04-19 11:31:51 +00:00
Commented Apr 19, 2016 at 11:31 — Rayon
– Rayon, Commented Apr 19, 2016 at 11:31
@olivier, Tushar is more accurate :)

Rayon
– Rayon

2016-04-19 11:33:55 +00:00
Commented Apr 19, 2016 at 11:33 — Rayon
– Rayon, Commented Apr 19, 2016 at 11:33
@olivier And Rayon is more readable :)

Tushar
– Tushar

2016-04-19 11:35:33 +00:00
Commented Apr 19, 2016 at 11:35 — Tushar
– Tushar, Commented Apr 19, 2016 at 11:35

manish · Accepted Answer · 2016-04-19 11:49:21Z

1

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

answered Apr 19, 2016 at 11:49

manish

1,4588 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

asif308 · Accepted Answer · 2016-04-19 11:46:45Z

0

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">

answered Apr 19, 2016 at 11:46

asif308

901 gold badge1 silver badge10 bronze badges

Comments

Itay Grudev · Accepted Answer · 2016-04-19 12:04:58Z

0

<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">

edited Apr 19, 2016 at 12:04

Itay Grudev

7,5544 gold badges60 silver badges97 bronze badges

answered Apr 19, 2016 at 11:35

Syam Pillai

5,2202 gold badges31 silver badges43 bronze badges

Collectives™ on Stack Overflow

Hide a div with angular if the input field is empty

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related