Styjun

Should I tip on the Amtrak train?

Statistical closeness implies computational indistinguishability

How is the phase of 120V AC established in a North American home?

Did "Dirty Harry" feel lucky?

The Green Glass Door, Revisited

Did the Byzantines ever attempt to move their capital to Rome?

Friend is very nit picky about side comments I don't intend to be taken too seriously

How can I know what hashing algorithm SQL Server used to decrypt the encrypted data when using the function DECRYPTBYPASSPHRASE?

How to improvise or make pot grip / pot handle

Why has Marx's "Das Kapital" been translated to "Capital" in English and not "The Capital"

How do you say "to hell with everything" in French?

Can taking my 1-week-old on a 6-7 hours journey in the car lead to medical complications?

Professor refuses to write a recommendation letter to students who haven't written a research paper with him

Word for something that used to be popular but not anymore

Why is it that I have to play this note on the piano as A sharp?

Template default argument loses its reference type

Round away from zero

Contractor cut joist hangers to make them fit

Entering the US with dual citizenship but US passport is long expired?

How should Thaumaturgy's "three times as loud as normal" be interpreted?

Is every sentence we write or utter either true or false?

Can you pop microwave popcorn on a stove?

Short story: Interstellar inspector senses "off" nature of planet hiding aggressive culture

Supervisor wants me to support a diploma-thesis SW tool after I graduated

Sorting dropdown in Angular without case sensitive

How do I modify the URL without reloading the page?I need an unordered list without any bulletsHow to style a <select> dropdown with only CSS?jQuery Get Selected Option From DropdownAngular HTML bindingSetting selected option of select control in an Angular 2 model-driven formAdd or Remove HTML elements into view using data model in angular 2 with type script without using innerHTML and standard structural directiveHow can I bind select dropdown in angular2 using formBuilder?How to have a default “please select” option on an Angular select element with a null value for validation?Angular reset dropdown values primeng

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I was having problem when trying to sort the dropdown values in Angular Typescript. I am trying to sort by staffName:

<div class="row">
 <div class="form-group col-md-2">
 <strong><label class="form-control-label" jhiTranslate="staff.staffReportingOfficer" for="field_staffReportingOfficer">Staff Reporting Officer</label></strong>
 </div>
 <div class="form-group col-md-4">
 <select class="form-control" id="field_staffReportingOfficer" name="staffReportingOfficer" [(ngModel)]="staff.staffReportingOfficer" (change)="roDropdownOnChange()">
 <option [ngValue]='' disabled>Please select an Option</option>
 <option [ngValue]="reportingOfficerOption.id === staff.reportingOfficer?.id ? staff.reportingOfficer.staffName : reportingOfficerOption.staffName" *ngFor="let reportingOfficerOption of reportingOfficers | orderBy: 'staffName'">reportingOfficerOption.staffName</option>
 </select>
 </div>
 </div>

My staffs array contains data like A, B, C, D, E, aaaa. Then it is showing the exact same sequence as above.

My desired output will be like A, aaaa, B, C, D, E. Any ideas?

html angular typescript

share|improve this question

asked Mar 28 at 6:14

hyperfkcbhyperfkcb

79622 gold badges1616 silver badges4646 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't think Angular has an OrderBy pipe anymore. You will need to manually sort your array
  
  – wentjun
  Mar 28 at 6:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check this example, I think this is what you are looking for: stackblitz.com/edit/angular-yfw5ia?file=app/…
  
  – user1913615
  Mar 28 at 6:20
  

  
  
  
  

add a comment | 

0

I was having problem when trying to sort the dropdown values in Angular Typescript. I am trying to sort by staffName:

<div class="row">
 <div class="form-group col-md-2">
 <strong><label class="form-control-label" jhiTranslate="staff.staffReportingOfficer" for="field_staffReportingOfficer">Staff Reporting Officer</label></strong>
 </div>
 <div class="form-group col-md-4">
 <select class="form-control" id="field_staffReportingOfficer" name="staffReportingOfficer" [(ngModel)]="staff.staffReportingOfficer" (change)="roDropdownOnChange()">
 <option [ngValue]='' disabled>Please select an Option</option>
 <option [ngValue]="reportingOfficerOption.id === staff.reportingOfficer?.id ? staff.reportingOfficer.staffName : reportingOfficerOption.staffName" *ngFor="let reportingOfficerOption of reportingOfficers | orderBy: 'staffName'">reportingOfficerOption.staffName</option>
 </select>
 </div>
 </div>

My staffs array contains data like A, B, C, D, E, aaaa. Then it is showing the exact same sequence as above.

My desired output will be like A, aaaa, B, C, D, E. Any ideas?

html angular typescript

share|improve this question

asked Mar 28 at 6:14

hyperfkcbhyperfkcb

79622 gold badges1616 silver badges4646 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I don't think Angular has an OrderBy pipe anymore. You will need to manually sort your array
  
  – wentjun
  Mar 28 at 6:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Check this example, I think this is what you are looking for: stackblitz.com/edit/angular-yfw5ia?file=app/…
  
  – user1913615
  Mar 28 at 6:20
  

  
  
  
  

add a comment | 

I was having problem when trying to sort the dropdown values in Angular Typescript. I am trying to sort by staffName:

<div class="row">
 <div class="form-group col-md-2">
 <strong><label class="form-control-label" jhiTranslate="staff.staffReportingOfficer" for="field_staffReportingOfficer">Staff Reporting Officer</label></strong>
 </div>
 <div class="form-group col-md-4">
 <select class="form-control" id="field_staffReportingOfficer" name="staffReportingOfficer" [(ngModel)]="staff.staffReportingOfficer" (change)="roDropdownOnChange()">
 <option [ngValue]='' disabled>Please select an Option</option>
 <option [ngValue]="reportingOfficerOption.id === staff.reportingOfficer?.id ? staff.reportingOfficer.staffName : reportingOfficerOption.staffName" *ngFor="let reportingOfficerOption of reportingOfficers | orderBy: 'staffName'">reportingOfficerOption.staffName</option>
 </select>
 </div>
 </div>

My staffs array contains data like A, B, C, D, E, aaaa. Then it is showing the exact same sequence as above.

My desired output will be like A, aaaa, B, C, D, E. Any ideas?

html angular typescript

share|improve this question

asked Mar 28 at 6:14

hyperfkcbhyperfkcb

79622 gold badges1616 silver badges4646 bronze badges

<div class="row">
 <div class="form-group col-md-2">
 <strong><label class="form-control-label" jhiTranslate="staff.staffReportingOfficer" for="field_staffReportingOfficer">Staff Reporting Officer</label></strong>
 </div>
 <div class="form-group col-md-4">
 <select class="form-control" id="field_staffReportingOfficer" name="staffReportingOfficer" [(ngModel)]="staff.staffReportingOfficer" (change)="roDropdownOnChange()">
 <option [ngValue]='' disabled>Please select an Option</option>
 <option [ngValue]="reportingOfficerOption.id === staff.reportingOfficer?.id ? staff.reportingOfficer.staffName : reportingOfficerOption.staffName" *ngFor="let reportingOfficerOption of reportingOfficers | orderBy: 'staffName'">reportingOfficerOption.staffName</option>
 </select>
 </div>
 </div>

html angular typescript

html angular typescript

share|improve this question

asked Mar 28 at 6:14

hyperfkcbhyperfkcb

79622 gold badges1616 silver badges4646 bronze badges

share|improve this question

asked Mar 28 at 6:14

hyperfkcbhyperfkcb

79622 gold badges1616 silver badges4646 bronze badges

asked Mar 28 at 6:14

hyperfkcbhyperfkcb

79622 gold badges1616 silver badges4646 bronze badges

asked Mar 28 at 6:14

hyperfkcbhyperfkcb

79622 gold badges1616 silver badges4646 bronze badges

2 Answers
2

active

oldest

votes

0

Angular no longer has the OrderBy pipe. You may refer to this for more details.

You will need to manually sort your reportingOfficers array. It seems it is an array of objects?

To perform a case insensitve sort, we will need to supply a custom sorting function by converting staffName values to lower case.

reportingOfficers.sort((a, b) => a['staffName'].toLowerCase().localeCompare(b['staffName'].toLowerCase()));
console.log(reportingOfficers);

This is how it is done with vanilla JavaScript/TypeScript (without relying on additional libraries such as Lodash).

share|improve this answer

edited Mar 28 at 6:27

answered Mar 28 at 6:21

wentjunwentjun

7,62511 gold badge44 silver badges2424 bronze badges

add a comment | 

1

You can use lodash for this

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) 
	return val.toLowerCase();
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

share|improve this answer

answered Mar 28 at 6:24

Abdul BasitAbdul Basit

86555 silver badges1616 bronze badges

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55391191%2fsorting-dropdown-in-angular-without-case-sensitive%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Angular no longer has the OrderBy pipe. You may refer to this for more details.

You will need to manually sort your reportingOfficers array. It seems it is an array of objects?

To perform a case insensitve sort, we will need to supply a custom sorting function by converting staffName values to lower case.

reportingOfficers.sort((a, b) => a['staffName'].toLowerCase().localeCompare(b['staffName'].toLowerCase()));
console.log(reportingOfficers);

This is how it is done with vanilla JavaScript/TypeScript (without relying on additional libraries such as Lodash).

share|improve this answer

edited Mar 28 at 6:27

answered Mar 28 at 6:21

wentjunwentjun

7,62511 gold badge44 silver badges2424 bronze badges

add a comment | 

0

Angular no longer has the OrderBy pipe. You may refer to this for more details.

You will need to manually sort your reportingOfficers array. It seems it is an array of objects?

To perform a case insensitve sort, we will need to supply a custom sorting function by converting staffName values to lower case.

reportingOfficers.sort((a, b) => a['staffName'].toLowerCase().localeCompare(b['staffName'].toLowerCase()));
console.log(reportingOfficers);

This is how it is done with vanilla JavaScript/TypeScript (without relying on additional libraries such as Lodash).

share|improve this answer

edited Mar 28 at 6:27

answered Mar 28 at 6:21

wentjunwentjun

7,62511 gold badge44 silver badges2424 bronze badges

add a comment | 

Angular no longer has the OrderBy pipe. You may refer to this for more details.

You will need to manually sort your reportingOfficers array. It seems it is an array of objects?

To perform a case insensitve sort, we will need to supply a custom sorting function by converting staffName values to lower case.

reportingOfficers.sort((a, b) => a['staffName'].toLowerCase().localeCompare(b['staffName'].toLowerCase()));
console.log(reportingOfficers);

This is how it is done with vanilla JavaScript/TypeScript (without relying on additional libraries such as Lodash).

share|improve this answer

edited Mar 28 at 6:27

answered Mar 28 at 6:21

wentjunwentjun

7,62511 gold badge44 silver badges2424 bronze badges

reportingOfficers.sort((a, b) => a['staffName'].toLowerCase().localeCompare(b['staffName'].toLowerCase()));
console.log(reportingOfficers);

share|improve this answer

edited Mar 28 at 6:27

answered Mar 28 at 6:21

wentjunwentjun

7,62511 gold badge44 silver badges2424 bronze badges

answered Mar 28 at 6:21

wentjunwentjun

7,62511 gold badge44 silver badges2424 bronze badges

answered Mar 28 at 6:21

wentjunwentjun

7,62511 gold badge44 silver badges2424 bronze badges

1

You can use lodash for this

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) 
	return val.toLowerCase();
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

share|improve this answer

answered Mar 28 at 6:24

Abdul BasitAbdul Basit

86555 silver badges1616 bronze badges

add a comment | 

1

You can use lodash for this

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) 
	return val.toLowerCase();
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

share|improve this answer

answered Mar 28 at 6:24

Abdul BasitAbdul Basit

86555 silver badges1616 bronze badges

add a comment | 

You can use lodash for this

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) 
	return val.toLowerCase();
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

share|improve this answer

answered Mar 28 at 6:24

Abdul BasitAbdul Basit

86555 silver badges1616 bronze badges

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) 
	return val.toLowerCase();
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) 
	return val.toLowerCase();
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

var arr = ['A', 'B', 'C', 'a', 'b']

console.log(_.sortBy(arr, function (val) 
	return val.toLowerCase();
));

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>

share|improve this answer

answered Mar 28 at 6:24

Abdul BasitAbdul Basit

86555 silver badges1616 bronze badges

answered Mar 28 at 6:24

Abdul BasitAbdul Basit

86555 silver badges1616 bronze badges

answered Mar 28 at 6:24

Abdul BasitAbdul Basit

86555 silver badges1616 bronze badges