Question

我尝试创建一些功能，其中用户将有一个输入框，并且隐藏了下面的所有数据（li＆＃39; s）。然后，当用户键入输入框时，将显示与该文本匹配的那些文字。

使用角度最好的方法是什么？我在下面设置了plunker： http://plnkr.co/edit/T6JOBJE4LrAtshbmaoPk?p=preview

我想把李设置为：

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的列表项

2 个答案: