Question

我使用过滤器进行AgularJS搜索，该搜索有效。我现在希望过滤器只显示与过滤器匹配的结果。

所以，我希望初始数据加载不显示，如果我输入的过滤器匹配，则显示结果。

到目前为止，这是我的代码：

<div class="row">
  <div class="large-12 columns">
    <div ng-app>
      <div ng-controller="CashTransController">      
        <input type="text" ng-model="search.$">

        <br />

        <div><strong>Filter Results</strong></div>

        <br />

        <div class="row"></div>

        <br/>

        <table border="0" class="items">
          <thead>
            <tr>
              <th>Purchaser</th>
              <th>Redemption Code</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="item in items | filter:search">
              <td>{{item.firstname}} {{item.lastname}}</td>
              <td valign="top"><h3>{{item.redemption_code}}</h3></td>
              <td><h3><a href="#">{{item.creation_date}}</a></h3></td>    
            </tr>
          </tbody>
        </table>

        <br />
      </div>
    </div>
  </div>
</div>

Answer 1

您只需在表格项目中添加ng-show即可。

我不知道您为何调用搜索模型搜索。$而不只是搜索。

试试这段代码。如果您在输入中输入内容，它将仅显示结果：

<div class="row">
    <div class="large-12 columns">
        <input type="text" ng-model="search">
        <br/>

        <div><strong>Filter Results</strong></div>
        <br/>

        <div class="row">
            <p>{{search}}</p>
        </div>
        <br/>
        <table border="0" class="items">
            <thead>
            <tr>
                <th>Purchaser</th>
                <th>Redemption Code</th>

                <th>Amount</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-show="search" ng-repeat="item in items | filter:search">
                <td>{{item.firstname}} {{item.lastname}}</td>
                <td valign="top"><h3>{{item.redemption_code}}</h3></td>
                <td><h3><a href="#">{{item.creation_date}}</a></h3></td>
            </tr>
            </tbody>
        </table>
        <br/>
    </div>
</div>

AngularJS ng-show，ng-hide

1 个答案: