Angular 2 /4 Assign model value from loop index

Question

I want to assign model value from the current loop index, but its not working . any idea about this

https://plnkr.co/edit/YccCBF98vCetWXJa1UJX?p=preview

  <p *ngFor="let person of peoples; let i = index;">
  
  <input type="hidden" [(ngModel)]="person.displayOrder" [value]="i+1" />
  
  </p>

What is your intention? You want to assign i+1 to person.displayOrder? — FAISAL, Aug 02 '17 at 13:03

Vivek Doshi · Answer 1 · 2017-08-02T14:11:35.957

3

For this we need to create a custom pipe :

HTML :

<div>
    <h2>Hello {{name}}</h2>
    <p *ngFor="let person of (peoples | changeOrder); let i= index;">
        {{person.name}} <input type="text" name='{{i}}' [(ngModel)]="person.order" />
    </p>
</div>

Custom Pipe :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'changeOrder' })
export class changeOrder implements PipeTransform {
  transform(allPeoples) {
    return allPeoples.map( ( val ,index) => { val.order = index; return val; });
  }
}

NgModule :

@NgModule({
  imports: [ BrowserModule,FormsModule ],
  declarations: [ App , changeOrder ],
  bootstrap: [ App ]
})

Hers is the link to Plunker , please have a look.

edited Aug 02 '17 at 14:11

answered Aug 02 '17 at 12:53

Vivek Doshi

56,649
12
110
122

Will you please set the plunker for this ? – Vivek Doshi Aug 02 '17 at 13:12
the value setting , but not working the 2 way binding (Not changing the actual model value) , please checjk the updated plunker – Sarath Aug 02 '17 at 13:52
@Sarath, Glad to hear that :) , will you please also accept the answer ? – Vivek Doshi Aug 03 '17 at 05:03
@VivekDoshi why need pipe. can't we do it without pipe? – Khurshid Ansari Apr 07 '19 at 07:51

BogdanC · Answer 2 · 2017-08-02T14:34:50.727

0

~~Try to use ngValue instead of value.~~ Take a look at the answer I gave here.

Edit

Sorry, ngValue is for option on select and you have an input. I tried your initial code and is working fine. What is your error?

edited Aug 02 '17 at 14:34

answered Aug 02 '17 at 13:16

BogdanC

2,746
2
24
22

Getting this error message: Can't bind to 'ngValue' since it isn't a known property of 'input'. – Sarath Aug 02 '17 at 13:23

Angular 2 /4 Assign model value from loop index

2 Answers2

Edit