angularjs - 如何使用 angular.js 仅显示隐藏列表的结果

Question

我是 Angular.js 的新手，遇到了一些问题。

我有一个可通过局部范围变量搜索的列表。但是，我不想显示默认显示在输入字段下方的列表。我只想显示查询结果。我怎样才能做到这一点？

目前我有：

<form class="form-inline">
  <input ng-model="query" type="text" placeholder="Filter by" autofocus>
</form>

<ul ng-repeat="friend in friends | filter:query | orderBy: 'name' ">
  <li ng-show="friend">{{friend.name}}</li>
</ul>

使用“ng-hide”成功地从视图中隐藏了列表，但我不知道如何显示查询结果。:(

这里的任何提示都会很有用。你可以看看我的小提琴：测试查询。

Answer 1

您可以添加ng-show="query"到<ul>仅在查询不为假时才显示结果的内容。

上ng-show="friend"是<li>不必要的。

<ul 
    ng-show="query" 
    ng-repeat="friend in friends | filter:query | orderBy: 'name'"
>
    <li>{{friend.name}}</li>
</ul>

JSFiddle