DataList in Angular

Question

I have a <datalist> and <select> as follows:

Updated:

Example 1:

<input type="text"  list="codes" [(ngModel)]="codeValue" (change)="saveCode(codeValue)">
<datalist id="codes">
  <option *ngFor="let c of codeList" [value]="c.code" >{{c.name}}</option>
</datalist>

<select type="text"  list="codes" [(ngModel)]="codeValue1" (change)="saveCode(codeValue)">
  <option *ngFor="let c of codeList" [value]="c.code" >{{c.name}}</option>
</select>

codeList Array in component.ts

    codeList = [
    { code: 'abcdhe568dhjkldn', name: 'item1' },
    { code: 'ksdkcs7238t8cds', name: 'item2' },
    { code: 'kascggibebbi', name: 'item3' }
  ];

DataList is showing both name (c.name) and value (c.code) in the options and storing whatever is present in value whereas select is showing name (c.name) and storing value(c.code).

Behavior of datalist

Behavior of select

Example 2:

<datalist id="codes">
<option *ngFor = "let i of [1,2,3,4]" [value]="i">{{i-1}}</option>
</datalist>

{{a}}

I want to show the value of i-1 in the suggestion box but bind the variable 'a' with i.

Existing Solution in HTML

From this post Show datalist labels but submit the actual value I see that we can use "data-value" to acheive the functionality in HTML. How can I achieve the same functionality in Angular.

Please help!

Thanks in advance.

Hi @Dino, I have updated the question with another example for clear description of the problem. — Sai Raman Kilambi, Mar 24 '18 at 03:23
I think what you want to archive is the same output as the select but using the datalist tag. I'm also trying to do the same thing without showing the ID value but being able to post select the option if I click view — Tlotli Otlotleng, Dec 08 '21 at 11:41

score 3 · Answer 1 · answered Feb 14 '20 at 10:26

Try Like this....

html File

<input type="text"  list="codes" [(ngModel)]="codeValue" (change)="saveCode($event)">
<datalist id="codes">
<option *ngFor="let c of codeList" [value]="c.name" >{{c.name}}</option>
</datalist>

ts File

 codeList = [
{ code: 'abcdhe568dhjkldn', name: 'item1' },
{ code: 'ksdkcs7238t8cds', name: 'item2' },
{ code: 'kascggibebbi', name: 'item3' }
];

 public saveCode(e): void {
let name = e.target.value;
let list = this.codeList.filter(x => x.name === name)[0];
console.log(list.id);
}

score 0 · Answer 2 · answered Mar 23 '18 at 18:25

0

Try it this way.

<option *ngFor = "let i of [1,2,3,4]" (change)="a=i" [value]="i">{{i-1}}</option>

answered Mar 23 '18 at 18:25

Hi @DiabolicWords, I have attached a screenshot of the problem.The problem is that while displaying I get both the value and the name. In my case I just want to display the name (i-1) not the actual value(i).The value should be bound to the variable 'a' whereas the name should be displayed in the suggestion box. – Sai Raman Kilambi Mar 23 '18 at 18:32

score 0 · Answer 3 · answered Mar 23 '18 at 18:45

Well, may someone correct me if I'm not telling the truth but you can't bind [value] to 'a', because then every option-element has the same value 'a'.

To achieve what you want you have to build an Array of objects that contain both fields, 'a' and 'i'. Then you can show 'i' and bind your value via ngModel to 'a'.

e.g.

in your component

export class AI {
    constructor(
      a: number,
      i: number
    ) {}
}


aiList: Array<AI> = [];

ai: AI = new AI(1,0);
aiList.push(ai);
ai = new AI(2,1);
aiList.push(ai);
ai = new AI(3,2);
aiList.push(ai);
ai: = new AI(4,3);
aiList.push(ai);

in your template

<option *ngFor = "let ai of aiList" (change)="a=ai.a" [(ngModel)]="ai.a">{{ai.i}}</option>

DataList in Angular

3 Answers3

Linked