angular data-table filter on inputs in td

Question

I'm using this library https://l-lin.github.io/angular-datatables/#/welcome

I'm placing input fields inside of the table data like so:

  <td> <input type="text" ng-model="item.tiersk" /> </td>

However, when I do this I am no longer able to filter by order using the built in table head filter feature. I have other table data in other columns that work like so:

                    <td> {{item.expensetype.expensename}}</td>

Is there away to add a value to the td element to sort on? Maybe something like this:

<td value="{{item.tiersk}}"> <input type="text" ng-model="item.tiersk" /> </td>

Mordagel · Accepted Answer · 2017-11-03 21:17:51Z

0

Angular just reflects the array of data that's there. The best way to sort based on an input is to use a setter

i.e.
set myfield(s: string){
this.myarray[x].myfield = s;
this.sort(myarray)
}

Where x can be set by picking the row on the UI. (click)=pickRow() function.

answered Nov 3, 2017 at 21:17

Mordagel

3012 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

davidkonrad · Accepted Answer · 2017-11-03 21:18:22Z

0

Is there away to add a value to the td element to sort on?

Yes, see HTML5 data-* attributes - cell data. Add a data-sort attribute to your <td>'s :

<td data-sort="{{item.tiersk}}"> <input type="text" ng-model="item.tiersk" /> </td>

Use data-sort for special values when the tables is sorted, i.e user clicking on column headers; data-filter for the search box.

answered Nov 3, 2017 at 21:18

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Collectives™ on Stack Overflow

angular data-table filter on inputs in td

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related