ng-repeat入力フィールドに日付を表​​示する - angularjs

Question

入力フィールド内の配列からng-repeatで日付を表示したいとします。私は表示することができますが、最初のインデックス値がすべてのフィールドに反映されます。

$scope.trackPaymentDetails = [{"itemNo": 1, "nextduedate": "Jan 02, 2010", "Status": "Paid", "amount": 1000}, {"itemNo": 2, "Status": "Unpaid", "amount": 5000}]; 

<table class="table table-hover" novalidate> 

<tr> 
<th>&nbsp;&nbsp;S.No.</th> 
<th>&nbsp;&nbsp;Amount</th> 
<th>&nbsp;&nbsp;Due Date</th> 
</tr> 

<tbody> 
<tr dir-paginate="item in trackPaymentDetails |orderBy:sortkey:reverse|itemsPerPage:2"> 
<td>&nbsp;&nbsp;{{$index + 1}}</td> 
<td>&nbsp;&nbsp;{{item.amount}}</td> 
<td><input class="form-control7" type="text" id="trackPaymentDueDate_{{$index}}" name="duedate" ng-model="model.nextduedate" required readonly="readonly" datepicker-popup="MMM dd, yyyy" placeholder=" " style="background-color: transparent;" value={{item.nextduedate}}></td> 
</tr> 
</tbody> 
</table> 

Answer 1

あなたはng-repeatを使用していません。 dir-paginateを使用しています。最初に変更してください。入力でng-modelの値としてitem.nextduedateを追加します。あなたはそれらのすべてに同じ `NG-model`と[値]を使用しているので、おそらくです

angular.module("app",[]) 
 
.controller("ctrl",function($scope){ 
 

 
$scope.model = {}; 
 

 
$scope.trackPaymentDetails = [{"itemNo": 1, "nextduedate": "Jan 02, 2010", "Status": "Paid", "amount": 1000}, {"itemNo": 2, "Status": "Unpaid", "amount": 5000}]; 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="ctrl"> 
 
<table class="table table-hover" novalidate> 
 

 
<tr> 
 
<th>&nbsp;&nbsp;S.No.</th> 
 
<th>&nbsp;&nbsp;Amount</th> 
 
<th>&nbsp;&nbsp;Due Date</th> 
 
</tr> 
 

 
<tbody> 
 
<tr ng-repeat="item in trackPaymentDetails"> 
 
<td>&nbsp;&nbsp;{{$index + 1}}</td> 
 
<td>&nbsp;&nbsp;{{item.amount}}</td> 
 
<td><input class="form-control7" type="text" id="trackPaymentDueDate_{{$index}}" name="duedate" ng-model="item.nextduedate" required readonly="readonly" datepicker-popup="MMM dd, yyyy" placeholder=" " style="background-color: transparent;" ></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div>