Question

在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对象，以便将其应用于过滤器？

Answer 1

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

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

Answer 2

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

ng-model="someObject.searchQuery"

将在范围树中正确地共享您的数据，而

ng-model="searchQuery"

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

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

2 个答案: