Question

我需要隐藏div（类＆＃34;卡＆＃34;），直到用户在文本字段中输入文本。我正在为我的应用程序使用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设置为等于模型值。当它为空时，ng-show将评估为false并隐藏div。当输入具有值时，ng-show将评估为true并显示div。

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

Answer 2

在输入值后，将ng-show或ng-if添加到要显示的元素

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

或者你可以用另一个div包装这个div

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

但你不必这样做...假设过滤器仅在searchBox符合任何值时给出结果，因此如果没有值，ng-repeat不会创建任何元素

使用angularjs

2 个答案: