📌  相关文章
📜  如何使用AngularJS根据ng-model过滤ng-repeat值?(1)

📅  最后修改于: 2023-12-03 15:08:24.689000             🧑  作者: Mango

如何使用AngularJS根据ng-model过滤ng-repeat值?

在AngularJS中,我们可以使用ng-model和ng-repeat来创建动态的过滤器,以根据用户的输入过滤列表中的值。下面是一个使用AngularJS实现此功能的示例:

首先,我们需要在控制器中定义一个对象,该对象将存储搜索过滤器的值。可以将其命名为search:

angular.module('myApp', [])
  .controller('myController', function($scope) {
    $scope.search = {};
  });

接下来,我们需要在HTML中定义搜索框和显示列表。通常,我们将搜索框放在页面的顶部,而显示列表则在搜索框下方。我们可以使用ng-model来绑定用户输入的值到search对象中,并使用ng-repeat来显示过滤后的列表。

<div ng-controller="myController">
  <input type="text" ng-model="search.text">

  <ul>
    <li ng-repeat="item in items | filter:search">{{ item }}</li>
  </ul>
</div>

在上面的代码中,我们使用ng-model将搜索框的值绑定到search.text属性中。我们还使用ng-repeat指令来遍历items数组,并使用AngularJS的filter过滤器根据search对象中的值进行匹配。

现在,我们可以尝试在搜索框中输入一些文本,以查看过滤器是否有效。如果输入与其中一个项目匹配的文本,则只会显示该项目,而其他项目将被隐藏。

以上是一个使用AngularJS根据ng-model过滤ng-repeat值的简单示例。通过使用这种方法,您可以轻松地为您的应用程序添加搜索过滤器功能,以使用户能够快速找到他们需要的内容。