AngularJS의 검색 필드 필터링

Question

AngularJS에서 검색 필터링이 작동하지 않습니다.

내 navbar.html : 뷰 템플릿에서

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

다음 index.html을에서

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

:

<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 내가 (네비게이션 바에 템플릿에 listpage 객체를 변경하려면 어떻게

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

입니다 ng-include에 포함), 필터에 적용되도록?

Answer 1

ng-model을 사용하는 경우 간접 참조 (범위 속성 자체가 아닌 범위에서 개체의 참조 속성)를 항상 사용해보십시오.

ng-model="searchQuery" 

로컬 범위에서만 작성하고 변경되지 않은 부모를 떠나있는 동안, 제대로 범위 나무에서 데이터를 공유 할 수

ng-model="someObject.searchQuery" 

사용.

Answer 2

Ng-include는 새 하위 범위를 생성하므로 부모 범위의 searchQuery가 업데이트되지 않습니다.

코드의 일부만 포함했기 때문에 특정 솔루션을 제공하기는 어렵지만 여기서는 AngularJS - losing scope when using ng-include 예제 솔루션으로 좋은 설명을 찾을 수 있습니다.