使用 AngularJS 中的搜索字段进行过滤

Filtering with search field in AngularJS

本文关键字：过滤 字段 搜索 AngularJS 使用      更新时间：2023-09-26

搜索过滤在AngularJS中对我不起作用。

我的导航栏.html：

<input type="text" placeholder="Search" data-ng-model="searchQuery">

在视图样板中：

<ul class="userlist">
  <li class="list" data-ng-repeat="user in users | filter: searchQuery">
    <!--users show here-->
  </li>
</ul>

在索引中.html：

<div data-ng-include data-src="'./templates/navbar.html'"></div>
<div data-ng-view></div>

我没有收到任何错误消息，它只是不起作用。这是因为模型位于单独的模板中吗？

2小时后，我仍然不知道如何实现这一点。但我想我越来越近了。当我更改搜索查询字符串时，它会过滤结果。所以我需要找出的只是我如何从导航栏模板（包含在 ng-include 中）控制这个字符串。

两个控制器：

//NAVBAR template controller
app.controller('NavbarController', ['$scope', '$location',
    function ($scope, $location) {
    }]);
//LIST page controller
app.controller('ListCtrl', ['$scope', '$http',
    function ($scope, $http) {
        $scope.listpage = {'searchQuery' : ''};
        //...
    }]);

查看.html：

<li data-ng-repeat="user in users | filter: listpage.searchQuery">

导航栏.html

<input type="text" data-ng-model="listpage.searchQuery">

如何更改导航栏模板中的列表页面对象（包含在 ng-include 中），以便将其应用于过滤器中？

使用

ng-model 时，请始终尝试使用间接引用（范围上对象的引用属性，而不是范围属性本身）。用

ng-model="someObject.searchQuery"

将跨作用域树正确共享数据，而

ng-model="searchQuery"

将仅在您的本地范围内写入，并保持父级不变。

Ng-include 创建新的子作用域，因此父作用域中的 searchQuery 不会更新。

很难给你具体的解决方案，因为你只包含了部分代码，但在这里：AngularJS - 使用 ng-include 时失去范围您可以通过示例解决方案找到很好的解释。

相关文章：