Filtering with search field in AngularJS

Question

Search filtering is not working for me in AngularJS.

My navbar.html:

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

In the view template:

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

In the index.html:

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

I do not receive any error messages, it just does not work. Is this because the model is in separate templates?

2 hours later and I still have no clue how to implement this. But I think I am getting closer. When I change the searchQuery string, it filters the results. So all I need to find out is how I control this string from the navbar template (which is included with ng-include).

The two controllers:

//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">

How do I change the listpage object in the navbar template (which is included with ng-include), so that it is applied in the filter?

1

can you make a fiddle – Naeem Shaikh Nov 21 '14 at 12:47

score 0 · Answer 1 · edited May 23 '17 at 11:51

0

Ng-include creates new child scope, so searchQuery in parent scope is not updating.

It is hard to give you specific solution because you included only part of your code, but here : AngularJS - losing scope when using ng-include you can find good explanations with example solutions.

edited May 23 '17 at 11:51

Community

1
1

answered Nov 21 '14 at 13:32

MSadura

1,032
13
18

score 0 · Accepted Answer · answered Nov 21 '14 at 13:44

When using ng-model, always try to use indirect references (reference properties of an object on scope rather than a scope property itself). Using

ng-model="someObject.searchQuery"

will correctly share your data across scope trees, while

ng-model="searchQuery"

will write only on your local scope and leave the parent unchanged.

Filtering with search field in AngularJS

2 Answers2