Sort and display only certain table rows based on the searchbox input

Question

Sort and display only certain table rows based on the searchbox input

My application is made up of the following components:

The index view containing the navbar and search box, managed by a nav controller. Two HTML pages within an ng-view element, each with its own controller - customerController and contactsController. These pages display tables populated with data retrieved from a service.

How can I pass a value from the navbar controller to the other two controllers in order to filter the table? The ng-view is not nested inside the navController scope.

This is my routing configuration:


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"
    })
});

html css angularjs

Answer 1

Answer №1

Utilizing angularjs custom events is a great way to transfer information between different parts of your application.

For more details, check out these resources:

How do I create a custom event in an AngularJs service

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

Data can be sent along with these events, allowing functions that are listening for them to access and utilize the data as needed.

Answer 2

Utilizing angularjs custom events is a great way to transfer information between different parts of your application.

For more details, check out these resources:

How do I create a custom event in an AngularJs service

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

Data can be sent along with these events, allowing functions that are listening for them to access and utilize the data as needed.

Answer 3

Answer №2

If you're looking for ways to facilitate communication between controllers, there are various solutions available. One approach is utilizing events as suggested by @ArslanW, while other methods may involve the use of services.

As a recommended practice, storing the search text in the URL as query parameters can be beneficial. This way, even if a user decides to refresh the page, the search results will remain intact because the search text can be retrieved from the URL's query parameters.

An excellent example of this functionality can be seen on Github.com's issue tracker. Users can search for issues and even after refreshing the page, the search results persist without any information loss.

To implement this feature, you will need two watchers. One watcher should be placed in your NavController to monitor changes in the search text and update the URL accordingly.

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

In your NavController, add the following watcher for the input model:

$scope.$watch('searchText', function () {
    $location.search('searchText', $scope.searchText);
});

With the URL now updated, you can utilize it to determine which search text to utilize within your application.

In the controllers for your HTML views (CustomerController and ContactsController) that display tables, watch for changes in the search text:

$scope.$watch(function () {
    return $location.search().searchText;
}, function (value) {
    if (value) {
        //Proceed based on the entered search text.
}
});

This approach allows you to achieve multiple objectives efficiently. The search text remains stored in the URL to prevent data loss upon page refresh, and also ensures effective communication with each controller regarding the entered search text.

Remember to set the reloadOnSearch property to false in your route configuration to avoid page refresh when adding query parameters:

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

Answer 4

If you're looking for ways to facilitate communication between controllers, there are various solutions available. One approach is utilizing events as suggested by @ArslanW, while other methods may involve the use of services.

As a recommended practice, storing the search text in the URL as query parameters can be beneficial. This way, even if a user decides to refresh the page, the search results will remain intact because the search text can be retrieved from the URL's query parameters.

An excellent example of this functionality can be seen on Github.com's issue tracker. Users can search for issues and even after refreshing the page, the search results persist without any information loss.

To implement this feature, you will need two watchers. One watcher should be placed in your NavController to monitor changes in the search text and update the URL accordingly.

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

In your NavController, add the following watcher for the input model:

$scope.$watch('searchText', function () {
    $location.search('searchText', $scope.searchText);
});

With the URL now updated, you can utilize it to determine which search text to utilize within your application.

In the controllers for your HTML views (CustomerController and ContactsController) that display tables, watch for changes in the search text:

$scope.$watch(function () {
    return $location.search().searchText;
}, function (value) {
    if (value) {
        //Proceed based on the entered search text.
}
});

This approach allows you to achieve multiple objectives efficiently. The search text remains stored in the URL to prevent data loss upon page refresh, and also ensures effective communication with each controller regarding the entered search text.

Remember to set the reloadOnSearch property to false in your route configuration to avoid page refresh when adding query parameters:

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

Sort and display only certain table rows based on the searchbox input

Answer №1

Answer №2

Similar questions

What is the best way to activate a CSS animation?

choose a row from the list

Tips for assigning a ceiling value specifically to the minValue

How to dynamically add a class to an element in ng-repeat that has been newly updated or added in

Unable to assign value to this.name within a $scope function in AngularJS

Shrink image sizes using PHP

Having difficulty aligning the container div in the center

Styling text in table cells using only CSS, without the use of scripting, based on the values within those cells

What is the process for loading this image?

Implementing div elements in a carousel of images

The function getComputedStyle(elem).getPropertyValue('fontSize') returns incorrect values when the font size of the element is specified in em units

The instantiation of the cloudinary module failed because of an error with the injector

I would like to style the input checkbox using CSS

Enhance the textarea using Javascript when clicked

Integration of Foundation-Apps Angular website with unit testing using Karma-Jasmine

Directing a webpage to a particular moment within that page

Using a Python class instance as a parameter in a Bottle template

`.svg file appearing slightly fuzzy when magnified in Chrome``

On a smaller screen size, the event listeners I add dynamically are successfully attached using the exact same HTML, however, they fail to attach on a larger screen size

How to Showcase Images in an Ionic 2 App Using HTML Content