Question

我有一个简单的问题，但我找不到这么多小时的答案......

我想制作谷歌搜索等内容。如果它是空的，那么屏幕的中心只有一个样式的输入框，但是当在里面输入一些文本时，会显示带有过滤的ng-repeat的div，并且输入位于页面的顶部。该输入也是过滤器。

它看起来像这样，并且可行，但我无法弄清楚如何根据输入值更改输入的div的样式，或者更确切地说，如果它是空的或不是。

此外，任何更优雅的解决方案都将受到赞赏。

<div ng-class="header">
Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-switch on="query">
<div ng-switch-when="">
</div>
<div ng-switch-default>
    <div class="product_list">
        <div ng-repeat="product in products | filter:query" class="product_block">
            <p id="name">{{ product.name }}</p>
        </div>
    </div>
</div>

Answer 1

只需使用ng-show，ng-hide。

<div ng-class="{HeaderNoInput: query=='', HeaderHasInput: query!=''}">
  Search: <input type="text" ng-model="query"/> {{query}}
</div>
<div ng-hide="query">Nothing to list.</div>
<div ng-show="query">
  <div class="product_list">
    <div ng-repeat="product in products | filter:query" class="product_block">
      <p id="name">{{ product.name }}</p>
    </div>
  </div>
</div>

如果输入值为空，则为AngularJS条件样式

1 个答案: