Filter table rows depending on value in searhbox

Question

My application consists of the following:

One indexview which my navbar is placed in together with a searchbox, this has a navcontroller. Two html pages which is placed in a ngview element with 2 different controllers. customercontroller and contactscontroller. Theese 2 pages have tables which gets data from a service.

How do i pass the value from the navbarcontroller to the other 2 controllers to filter my table? The Ng-View is not nested inside the navController scope.

This is my route.

app.config(function ($routeProvider) {
$routeProvider
    .when("/Customers", {
        templateUrl: "app/customers-list.html",
        controller: "customerController"
    })
    .when("/Contacts", {
        templateUrl: "app/contacts-list.html",
        controller: "contactController"
    })
    .when("/Prospects", {
        templateUrl: "app/saleprospect-list.html",
        controller: "prospectController"
    })
    .when("/Prospects/add", {
        templateUrl: "app/salesprospect-add.html",
        controller: "addController"
    })
    .when("/Prospects/:index", {
        templateUrl: "app/salesprospect-add.html",
        controller: "editController"
    })
    .otherwise({
        redirectTo: "/Customers"
    })

});

Are the two html pages nested / inside the navcontroller's view - indexview? — callmekatootie, Aug 03 '15 at 13:41

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

You can use angularjs custom events to pass information from one place to another.

As shown in this link:

How do I create a custom event in an AngularJs service

Working with $scope.$emit and $scope.$on

You can pass data with these events which can be used by functions listening for them.

edited May 23 '17 at 12:06

Community

1
1

answered Aug 03 '15 at 13:42

ArslanW

353
1
10

score 0 · Answer 2 · answered Aug 03 '15 at 13:59

You will find many solutions on how to communicate between controllers. As @ArslanW has pointed out, you can use events. Some answers will ask you to use services.

I believe that, as a best practice, you need to store the search text in the URL as query parameters. This has the benefit that if the user wishes to refresh the screen, the search results will not be reset because you can read the search text from the URL's query parameters.

Check Github.com's issue tracker for example. There you can search for issues and even if you refresh, you search result or text is not lost.

To carry this out, you need two watchers.

One watcher in your NavController to watch the search text and to copy it to the URL.

So, if your search text has the following markup:

<input type="text" data-ng-model="searchText">

... you need to have the following watcher on the input model (in your NavController)

$scope.$watch('searchText', function () {
    //This causes the URL to look like
    //http://localhost/#!/path?searchText=my%20search%text
    //where the search text is "my search text"
    $location.search('searchText', $scope.searchText);
});

Now that the URL will get updated, you can use the URL itself to determine which search text to use.

Thus, in the controller for your two HTML views (CustomerController and ContactsController that will display tables, you can then watch the search text for changes:

$scope.$watch(function () {
    return $location.search().searchText;
}, function (value) {
    //The search text may be undefined - possible when the page
    //loads and the user has not entered anything in the search box
    if (value) {
        //"value" is the search text entered by the user.
        //You can then use this and proceed accordingly.
}
});

You have thus hit two bushes with one stone. Your search text is stored in the URL which causes the application to not lose the search text on refresh. You have also communicated with each controller about the search text entered.

Note that since you are adding query parameters to the search text, your page will refresh. To prevent this, add the reloadOnSearch property to your route and set it to false:

$routeProvider
    .when("/Customers", {
        templateUrl: "app/customers-list.html",
        controller: "customerController",
        reloadOnSearch: false
    });

Filter table rows depending on value in searhbox

2 Answers2