如何使用 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" 成功地从视图中隐藏列表，但我不知道如何显示查询结果。 :(

这里的任何提示都会很有用。你可以查看我的fiddle：testing queries.

Answer 1

您可以将 ng-show="query" 添加到 <ul> 中，仅当查询不为 false 时才显示结果。

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

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

JSFiddle

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

How to display only the results of hidden list using angular.js

variables

angularjs

ng-repeat

ng-hide