скрыть div на основе ввода текстового поля с помощью angularjs

Question

Мне нужно скрыть div (класс «карта»), пока пользователь не вводит текст в текстовое поле. Я использую angularJS для своего приложения. Думаю, мне нужно использовать ng-show, но как я могу заставить это работать? Я ценю вашу помощь.

Это мой код:

<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> 
    [...] 

Answer 1

Вы можете просто установить нг-шоу, равную стоимости модели. Когда это будет пусто, ng-show будет оценивать значение false и скрывать div. Когда вход имеет значение ng-show, будет оцениваться значение true и показать div.

<div ng-repeat="item in posts | filter:searchBox" class="card" ng-show="searchBox"> 

Answer 2

добавить нг-шоу или нг-если элемент, который вы хотите, чтобы показать после того, как значение вводится

или вы можете обернуть эту Div с другой DIV

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

но вам не нужно это делать ... учитывая, что фильтр даст результаты только в том случае, если есть какое-либо значение, соответствующее searchBox, следовательно, если нет значения s, ng-repeat не будет создавать какой-либо элемент