在 AngularJS 中使用搜索字段进行过滤答案

【问题标题】：Filtering with search field in AngularJS在 AngularJS 中使用搜索字段进行过滤
【发布时间】：2015-04-25 03:47:01
【问题描述】：

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

我的 navbar.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>

在 index.html 中：

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

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

2 小时后，我仍然不知道如何实现这一点。但我想我越来越近了。当我更改 searchQuery 字符串时，它会过滤结果。所以我需要知道的是如何从导航栏模板（包含在 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' : ''};

        //...

    }]);

view.html:

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

navbar.html

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

如何更改导航栏模板（包含在 ng-include 中）中的 listpage 对象，以便在过滤器中应用？

【问题讨论】：

你能做个小提琴吗

标签： javascript angularjs angularjs-ng-repeat angular-ngmodel angular-filters

【解决方案1】：

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

ng-model="someObject.searchQuery"

将正确地跨范围树共享您的数据，同时

ng-model="searchQuery"

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

【讨论】：

【解决方案2】：

ng-include 创建新的子范围，因此父范围中的 searchQuery 不会更新。

很难为您提供具体的解决方案，因为您只包含了部分代码，但在这里：AngularJS - losing scope when using ng-include 您可以通过示例解决方案找到很好的解释。

【讨论】：