Utilize dynamic tags to implement filters

Question

Utilize dynamic tags to implement filters

Currently, I am working on a project where I have a table displaying elements using ng-repeat. My goal is to implement dynamic filters that can be added through tags using ng-tags-input plugin. These tags will serve as the filter criteria for the table data.

You can check out the plunk I have created to see the setup. I need assistance in utilizing these tag entries to create dynamic filters.

I attempted applying a single element filter like this:

<body ng-controller="MainCtrl">
    <tags-input ng-model="tags"></tags-input>
    <p>Model: {{tags}}</p>
    <table border=1 cellpadding=10px>
        <tr ng-repeat = "t in tableData | filter:tags[0].text">
            <td>{{t.data1}}</td>
            <td>{{t.data2}}</td>
        </tr>
    </table>
</body>

However, this method only allows filtering based on a single tag entry. Is there a way to apply all tag entries as filters?

I have come across solutions on SO that utilize filters in this format:

<tr ng-repeat = "t in tableData | filter:{data1:someFilteData}">

Check out one of the examples here: fiddle. Unfortunately, I'm having difficulties implementing filters from a JSON Array. Any suggestions on how to achieve this?

javascript angularjs filter tags angularjs-filter

Answer 1

Answer №1

If you're looking to filter items based on matching property values with tags, you can create a personalized filter using the following approach:

app.filter('filterByTags', function () {
    return function (items, tags) {
        var filtered = []; // Store items that match
        (items || []).forEach(function (item) { // Iterate through each item
            var matches = tags.some(function (tag) {          // Check if there is a matching tag
                return (item.data1.indexOf(tag.text) > -1) || // Check for substring in data1
                       (item.data2.indexOf(tag.text) > -1);   // Check for substring in data2
            });                                               // Consider it a match if found
            if (matches) {           // If there's a match
                filtered.push(item); // Add it to the 'filtered' array
            }
        });
        return filtered; // Return the array of matching items
    };
});

To use this custom filter, follow this syntax:

<tr ng-repeat="t in tableData | filterByTags:tags">

You can also view a quick demo for reference.

Answer 2

If you're looking to filter items based on matching property values with tags, you can create a personalized filter using the following approach:

app.filter('filterByTags', function () {
    return function (items, tags) {
        var filtered = []; // Store items that match
        (items || []).forEach(function (item) { // Iterate through each item
            var matches = tags.some(function (tag) {          // Check if there is a matching tag
                return (item.data1.indexOf(tag.text) > -1) || // Check for substring in data1
                       (item.data2.indexOf(tag.text) > -1);   // Check for substring in data2
            });                                               // Consider it a match if found
            if (matches) {           // If there's a match
                filtered.push(item); // Add it to the 'filtered' array
            }
        });
        return filtered; // Return the array of matching items
    };
});

To use this custom filter, follow this syntax:

<tr ng-repeat="t in tableData | filterByTags:tags">

You can also view a quick demo for reference.

Utilize dynamic tags to implement filters

Answer №1

Similar questions

Unlock the Power of jQuery Plugins: Implementing Global Settings Modifications

How can I incorporate a feature in my Angular application that allows users to switch between different view types, such as days, using JavaScript

Is there a way to create a Captcha image from text using JavaScript in an HTML document?

shifting the length of o to the right by zero with the

Adding images to chart labels in vue-chartjs explained

Guide on invoking a node.js function from an express-rendered ejs page

Should URL parameters be avoided as a method for retrieving data with React Router in a React application?

Customizing Pie Legends in Echart Configuration

Unknown provider error in Angular Jasmine mock testing

Troubleshooting: Unable to modify value with function in AngularJS

Checking validation with parsley.js without triggering form submission

sending data from a callback to an express router

Determine the total amount of pages generated from the Twitter search API

Issue with triggering jQuery .submit() function on Bootstrap 3 modal form

Having trouble with ES6 in Canvas - why won't my code display correctly?

Mastering Typescript lookup types - effectively limit the properties included in a merge operation with the Partial type

Using Material-UI to implement a Link component from the react-router library

The URL for the Javascript chunk includes colons at https://example.com/js/chunk-vendors.b3792e11.js:18:16400

The use of DIV tags allows the element to be displayed in an inline

Is There a Way to Abandon a route and Exit in Express during a single request?