AngularJS ng show，ng hide

我有一个使用过滤器的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>

筛选结果




买方
赎回代码
数量
{{item.firstname}{{item.lastname}}
{{item.redemption_code}

您只需在表项中添加一个

我不知道你为什么称你的搜索模型为search.$，而不仅仅是search

试试这个代码。仅当您在输入中键入内容时，它才会显示结果：

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

筛选结果


{{search}}



买方
赎回代码
数量
{{item.firstname}{{item.lastname}}
{{item.redemption_code}

您只需在表项中添加一个

我不知道你为什么称你的搜索模型为search.$，而不仅仅是search

试试这个代码。仅当您在输入中键入内容时，它才会显示结果：

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

筛选结果


{{search}}



买方
赎回代码
数量
{{item.firstname}{{item.lastname}}
{{item.redemption_code}

可以工作，但在搜索完成后，删除筛选文本，整个列表将可见，这是我不希望看到的。这就是为什么您必须使用ng model=“search”而不是ng model=“search.$”的原因。那么当你删除过滤文本时，它应该会起作用。明白了！它起作用了。我认为search.$是angularJS以前版本的残余。我如何接受你的回答？我是否使用“回答您的问题”按钮？您必须单击✓ count numberWorks下的图标，但在完成搜索并删除筛选文本后，整个列表将可见，这是我不希望看到的。这就是为什么您必须使用ng model=“search”而不是ng model=“search.$”的原因。那么当你删除过滤文本时，它应该会起作用。明白了！它起作用了。我认为search.$是angularJS以前版本的残余。我如何接受你的回答？我是否使用“回答您的问题”按钮？您必须单击✓ 计数编号下的图标