AngularJS 显示基于 ng-model 的列表项

Question

我正在尝试创建一些功能，让用户有一个输入框并隐藏下面的所有数据 (li's)。然后，当用户在输入框中键入内容时，将显示与该文本匹配的那些 li。

使用 angular 执行此操作的最佳方法是什么？我在下面设置了plunker： http://plnkr.co/edit/T6JOBJE4LrAtshbmaoPk?p=preview

我正在考虑将 li 设置为：

li {
 display: none;
}

然后打算尝试使用 ng-model 作为值的 ng-if。像这样：

  <div class="input-group">
    <span class="input-group-addon" id="basic-addon1">Search</span>
    <input type="text" class="form-control" ng-model="search">
  </div>    
    <ul>
      <li ng-repeat="x in data | filter:search " ng-if="!search">{{x.name}}</li>
    </ul>

有人可以帮我指明正确的方向吗？即使它只是解释逻辑。

Answer 1

您可以将 ng-show 属性设置为您的 <ul> 标签，您将在其中查看 search 变量的长度，如果它大于零，将显示您的过滤结果列表.所以，你不需要任何 css.

<ul ng-show="search.length">
  <li ng-repeat="x in data | filter:search ">{{x.name}}</li>
</ul>

Demo on plunker.

Answer 2

您的部分问题是过滤匹配空搜索字符串。您可以创建一个自定义过滤器来处理这个问题，例如 http://plnkr.co/edit/i4lsuVUmOLO3pbISu7FR?p=preview

$scope.filterName = function(datum) {
  console.log($scope.search, datum);
  return $scope.search !== '' && datum.name.indexOf($scope.search) !== -1;
};

在模板中使用如下：

<ul>
  <li ng-repeat="x in data | filter:filterName">{{x.name}}</li>
</ul>

如果你想在未来调整它，你可以更好地控制过滤器。

AngularJS 显示基于 ng-model 的列表项

AngularJS Show List Items based on ng-model

angularjs

angular-ngmodel