Combining multiple template filters in ng-table with the power of CoffeeScript

Combining AngularJS, ng-table, and coffeescript has been quite a task for me. I've been trying to create a multiple template filter within coffeescript and pass it into my angularjs template.

One of the challenges I'm facing is with a combined 'name & surname' column where I need two separate filters for 'name' and 'surname'.

Currently, I have managed to make it work like this;

      <td data-title="'Customer'" sortable="'fullname'"
        filter="{'name_cont': 'text', 'surname_cont':'text'}" >

However, I would prefer defining this filter in my AngularJS controller like this;

   $scope.nameFilterDef = {
     name: {
       id: "text",
       placeholder: "Name"
     },
     surname: {
       id: "text",
       placeholder: "Surname"
     }
   }

Then, using this filter definition in my template like this;

      <td data-title="'Customer'" sortable="'fullname'"
        filter="nameFilterDef" >

Unfortunately, when I try to apply the filter this way, no filter boxes appear.

Update

I noticed that if I output {{nameFilterDef}} on the page, I can see my filter hash being passed in successfully.

Answer №1

If the following html markup is effective for your needs...

<td data-title="'Customer'" sortable="'fullname'"
    filter="{'name_cont': 'text', 'surname_cont':'text'}" >

Then this alternative code should also suit your requirements:

//use this
 $scope.nameFilterDef = {
     'name_cont': 'text', 
     'surname_cont':'text'
  }
 //instead of this:
 $scope.nameFilterDef = {
 name: {
   id: "text",
   placeholder: "Name"
 },
 surname: {
   id: "text",
   placeholder: "Surname"
 }
}

-

<td data-title="'Customer'" sortable="'fullname'"
 filter="nameFilterDef" >

For a practical demonstration, visit this Codepen link: Passing filter from the controller as an object

Additionally, providing functional code in Plunker, Codepen, or jsFiddle would be greatly beneficial.

We hope this information proves valuable to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

``Can anyone provide guidance on extracting data from Xmlhttprequest POST request on my Nodejs express backend?"

Is there a way to properly send the values of candid and candidresults to my backend route /savevote in Express? Any help on how to achieve this would be appreciated. var candid; var candidresults; ...

Ways to include text with specific choices in a drop-down menu?

Within a form, I am encountering a situation where a select box's options are pre-selected through ajax based on a previously entered value. I am now seeking a way to append additional text to these pre-selected options only. for (i in data) { $("#my ...

Is it possible to easily extract all values associated with a particular key in a nested JSON using JavaScript?

I have a JSON structure that looks like this: [ { cells: [ { id: "1", cellType: 3, widget: { id: 1, description: "myDesc"} }, { id: "2", cellType: 4, widget: { id: 2, description: "myDesc2"} } ] }, { cells: [ { id: "3", c ...

SquirrelFish appears to be lacking "bind()", so how can one attach a JS callback to "this" in its absence?

Does anyone know a way to attach a JS callback to "this" without using "bind()"? Based on Samsung specifications: In 2013 with V8: everything functions as expected (refer to linked screenshot, too large to include here) In 2012 with SquirrelFish: encoun ...

Effortless pagination across various pages, utilizing diverse CSS selectors

I've integrated simple pagination into my website, but I've encountered a issue. My navigation consists of CSS tabs, each holding a unique pagination component. Here is the jQuery pagination code snippet: $(function(){ var perPage = 8; var open ...

How to use AngularJS to collapse various panels with unique content

Hey everyone, I'm working on developing a collapsible panel using Angular. The panel should consist of a header and body to display the content. The desired behavior is that when a button is clicked, the content collapses down, and clicking the same b ...

Attempting to utilize JSON.Stringify on Scripting.Dictionary objects will result in failure

In my current ASP classic project, I have integrated the JScript JSON class available at this link. This class can interact with both VBScript and JScript, closely resembling the code provided on json.org. However, due to team manager's requirement, I ...

Generating unique names based on input from users

We are working with an array containing names and an input field where users can enter a string to receive name suggestions. The array includes names like Alex and Anna, and when the user types "a," we want to suggest these names. Below is the code snippet ...

The ashx file is triggered with every server control postback in jqgrid

I have an asp .net webforms page with a jqgrid, as well as several other server controls. The jqgrid is populated using an ashx file which retrieves data from the database and binds it successfully. Challenge Whenever a postback occurs (such as from a dro ...

Is there a way for ASP.NET MVC to automatically notify when a record is edited or updated?

Having recently used the NotifyIcon class in a windows application, I found it to be quite useful. As someone who primarily works as a web developer, I am curious if there is something similar available for websites. The website that I am working on inclu ...

Using Jquery to retrieve data in sections from a server and continuously add it to a file on the client side

I have a large dataset stored in JSON format on a Postgres Server with hundreds of thousands of rows. To prevent memory overload on the server, I need to provide users with the ability to download the data in chunks rather than all at once. This requires a ...

A Javascript/JQuery event that prevents Chrome from loading insecure content

When a page is loaded over HTTPS but the resources are served from an HTTP website, Chrome will display an "insecure content" warning. Is there a way to detect when Chrome has blocked insecure content and if the user has allowed it? There is a shield icon ...

Is it possible to maintain inline style modifications when the dispatch event is triggered?

I am encountering an issue with inline style changes that are reset once my dispatch function is completed. Even though the rest of my component's functionality is working fine (the counter continues to run), the state is being re-rendered. Here is a ...

Clickability issue with searchbar results caused by onBlur event

My searchbar functionality includes showing results in a dropdown list when the user searches. However, I am facing an issue with the onBlur event that changes the display of the list to none when the user clicks away from the search box. The problem aris ...

The Appsheet algorithm determined the exact expiration date as 2 days from the specified date

In my Appsheet, I have two columns: Production Date and Expired Date. If the Production Date is 35 months before the Expired Date, how can I create a formula in Appsheet to calculate this? For example, if the Production Date is 01/10/2023, then the Expired ...

Angular: Verify that all services are fully executed before proceeding to the next step

We have adopted Angular for our project. Our component receives data from an API, which is then processed by Data Services. These services transform the data by combining first and last names, rounding dollar amounts, performing calculations, etc. The fina ...

The URL cannot be loaded by the XMLHttpRequest due to an invalid HTTP status code 400, which occurred when using a WebApi with AngularJS

I have encountered an issue with my WebApi Application and a basic web client that consumes it. I use angularJS to send requests from the web client to the WebApi, and CORS is enabled. While I was able to resolve a problem with POST requests in Chrome by ...

How to style large numbers with AngularJS

I'm facing a challenge with large numbers in a table and I'm seeking a solution to format them, ideally as $13b, $10m... Has anyone encountered this issue before and discovered a customized filter or solution for it? Appreciate any help! ...

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

The Best Approach for Angular Google Maps Integration

I'm diving into Angular for the first time while working on a project that requires advanced mapping functionality like clustering, routing, road routing, paths, directions, polygons, events, drawing on maps, info windows, markers, etc. After some re ...