在ng-repeat输入字段中显示日期 - angularjs

时间:2017-06-07 16:59:01

标签: angularjs

我想在输入字段内的数组中以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>

1 个答案:

答案 0 :(得分:0)

您没有使用ng-repeat。您正在使用dir-paginate。先改变它。然后在输入中添加item.nextduedate作为ng-model值。

&#13;
&#13;
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}];

})
&#13;
<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>
&#13;
&#13;
&#13;