2

I'm still new to Angular/JS... I'm displaying a bunch of data through filter pipe, and I now want the ability to toggle how my data is ordered: ascending or descending. I have an "orderBy" pipe that is working perfectly, but I currently have to hardcode the direction, and I want it to be dynamic. I want to achieve this via two radio buttons, but I'm having trouble grabbing the input value and inserting it into my *ngFor directive. 

<input type="radio" value="+"> Ascending<br>
<input type="radio" value="-"> Descending<br>

I need to grab the "+" or "-" and insert it just before the "recordStartDate."

<li (click)="showArtist(item);"
    *ngFor="let item of artists | search: field1Filter | orderBy:
    ['recordStartDate']">
</li>

['-recordStartDate'] results in descending order, and ['+recordStartDate'] (or no sign at all) produces ascending.

What is the best way to achieve this?

Thank you!

Edit:

I'm using this pipe here: https://stackoverflow.com/a/35635370/8201772 and there's a demo of it here: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby. Notice that on the demo there're select options which control whether the data is sorted in ascending or descending order via "+" and "-". How can I replicate these select option functionality? I'd comment on the original answer, but I need 50+ reputation to do so. Thanks!

Edit two:

Okay, so I've updated the two radio-buttons as seen below:

<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" value="['+recordStartDate']">Ascending<br>
<input type="radio" name="orderbydescending" [(ngModel)]="orderbydescending" value="['-recordStartDate']">Descending

and use the following in my view:

*ngFor="let item of artists | search: field1Filter | orderBy : orderbydescending"

then I get the following error: https://i.stack.imgur.com/Himx7.jpg.

If I remove the " [' " and " '] " the values of the radio buttons then the pipe stops working correctly (and I still get the same error).

Any ideas? Again, hardcoding this works perfectly. Thanks!

Boosman
  • 197
  • 2
  • 13

1 Answers1

1

I would actually use a boolean value to test which direction to filter

<input type="radio" [(ngModel)]="orderbydescending"  name="orderbydescending" value="false">Ascending<br>
<input type="radio" [(ngModel)]="orderbydescending"  name="orderbydescending" value="true">Descending

Then in your view:

<li (click)="showArtist(item);" *ngFor="let item of artists | search: field1Filter | orderBy : orderbydescending">
    {{ data goes here }}
</li>

Then your filter would accept the orderbydescending value as a parameter:

export class OrderByPipe implements PipeTransform {

    transform(value: any[], args?: any): any[] {
        // args holds true if ordering by descending, otherwise, you are ordering ascending
    }
}
developer033
  • 24,267
  • 8
  • 82
  • 108
birwin
  • 2,524
  • 2
  • 21
  • 41
  • Thanks, birwin! This would normally be perfect, but, I can't seem to get this working with the specific pipe that I'm using. I'm using this pipe here: https://stackoverflow.com/questions/32882013/angular-2-sort-and-filter/35635370#35635370 -- there's a demo of it here: http://fuelinteractive.github.io/fuel-ui/#/pipe/orderby. On the demo, check out the select options and how users can toggle between ascending and descending order by controlling the "+" or "-". Any idea of how this works? – Boosman Jul 03 '17 at 15:50
  • 1
    When you step through the code, what errors are you seeing? – birwin Jul 03 '17 at 16:45
  • 1
    Check out my **edit two** for my update and resulting error. Thanks! Perhaps I'm making a very simple/dumb mistake? – Boosman Jul 03 '17 at 19:05
  • 1
    @Boosman OrderBy pipe creator here. Just change your values to be strings by removing the brackets and `'`. So just `value="recordStartDate"` and `value="-recordStartDate"`. The array brackets are there to allow the ability to sort on multiple properties – Cory Shaw Jul 03 '17 at 20:15
  • 1
    @CoryShaw, THANK YOU!! However, it turns out that my actual problem is that the pipe is not totally sorting the data correctly. My "recordStateDate" values are dates in the following format: YYYYMMDD (no dashes; it's not being displayed anywhere). The pipe is returning 19990505 as a lower number than 19920918. I only have about five entries of dummy data at the moment, but everything else is getting sorted correctly. Those two "dates," however, are switched. Ideas? – Boosman Jul 03 '17 at 20:55
  • I realized what the problem is: the pipe is sorting my JSON objects based on the order in which they appear in my JSON file. Seems like I'm not accurately indicating the `artist.recordStartDate` key/value pair. Any ideas for this? – Boosman Jul 03 '17 at 22:42
  • Okay. Got it working. Not exactly sure what the problem was, to be honest. I started working on other aspects of the app and now it's functioning properly. Now I just need to get one of the radio buttons checked by default.... – Boosman Jul 04 '17 at 15:58
  • Sounds like your YYYMMDD was sorting as a string instead of a number. Glad you got it working! – Cory Shaw Jul 06 '17 at 02:22