Question

我正在尝试计算如何显示或隐藏ID和列表，并按名称使用输入文本进行过滤。

问题是项目列表将会很长，我希望每当我在输入中输入与现有项目引用相匹配的内容时，列表首先隐藏，然后显示为SHOWN和FILTERED。

我尝试在包含NG-SHOW的{{1}}中添加<div>指令，但后来没有显示任何内容...... 像这样：

这就是我所做的：http://plnkr.co/edit/HVI7iAHdkLJJhGeN9DT0?p=preview

注释了ng-show！

提前谢谢

Answer 1

如果我理解正确，那么在有人试图过滤列表之前，您不希望显示该列表。如果是这种情况，只需隐藏列表，直到输入有长度。

<ul ng-show="searchInput.length">
 <li data-ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }}       </li>
</ul>

Answer 2

http://plnkr.co/edit/HiibcFBahpXdux5YlOrh?p=preview

<body>
  <div data-ng-controller="CTController">
    Reference
    <br/>
    <input type="text" data-ng-model="searchInput" />
    <!--<div data-ng-show="showIt(searchInput)">-->
    <ul ng-if="searchInput">
      <li data-ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }}</li>
    </ul>
    <!--</div>-->
  </div>
</body>

Answer 3

据我所知，您只需在搜索时显示特定项目。为此，您不必将值传递给该函数。在ng-show中简单写出模型名称，以便在搜索时显示特定项目。

您可以查看此文章以获取更多信息：http://blog.hfarazm.com/filters-in-angularjs/

<!doctype html>
<html data-ng-app="ColisType">

<head>
  <script type="text/javascript" src='//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js'></script>
  <script type="text/javascript" src='script.js'></script>
</head>

<body>
  <div data-ng-controller="CTController as abc">
    Reference
    <br/>
    <input type="text" ng-model="searchInput" />
    <div ng-show="searchInput">
      <ul>
        <li ng-repeat="item in items | filter: searchInput">{{ item.id }} {{ item.ref }}</li>
      </ul>
    </div>
  </div>
</body>

</html>

无法在ng-show中显示ng-repeat

3 个答案: