CODEWITHSUNDEEP
htmlangulartypescripthtml-datalist
Sai Raman Kilambi
Sai Raman Kilambi

Reputation: 888

DataList in Angular

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 <dataList>

Behavior of select

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.

Upvotes: 6

Views: 23174

Answers (3)

Nithin mm
Nithin mm

Reputation: 131

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);
}

Upvotes: 3

user6749601
user6749601

Reputation:

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>

Upvotes: 0

user6749601
user6749601

Reputation:

Try it this way.

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

Upvotes: 0

Related Questions