在AngularJS中使用搜索字段進行篩選

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中），以便將其應用於過濾器中？

Answer 1

使用ng-model時，請始終嘗試使用間接引用（對象的作用域的引用屬性而不是作用域屬性本身）。使用

ng-model="someObject.searchQuery" 

將正常分享整個範圍樹數據，而

ng-model="searchQuery" 

只會寫上您的本地範圍，並留下家長不變。

Answer 2

Ng-include創建新的子範圍，所以在父範圍內的searchQuery不會更新。

由於您僅包含部分代碼，因此很難給出具體的解決方案，但在此處：AngularJS - losing scope when using ng-include 您可以通過示例解決方案找到很好的解釋。