如何修复,绑定重复数据添加表行

时间:2016-10-04 09:37:02

标签: angularjs asp.net-mvc

我有一个表格,一个客户下拉,按钮(点击显示模式弹出的待定值)两个输入值和+按钮添加新行 能够在更改时正确获取待处理数据,但是  我在这里减去两个值,Amount和AmountAdjusted然后在PendingAmount(span)中绑定该值。     我正在获得价值,但当我添加行重复相同的值时

[https://jsbin.com/horifanequ/edit?html,js,output (我想在添加行的第3个文本框中得到结果)]

<table>
        <tr>
            <th>Customer</th>
            <th>Pendings</th>
            <th>Pending Adjusted</th>
        </tr>
        <tr ng-repeat="r in rvm">
            <td>
                <select ng-model="c" ng-change="GetAccountBalance(c)" ng-options="c.ID as c.Name for c in customer track by c.ID" style="width:150px;height:22px;" name="tCustomer" required>
                    <option value="">select Customer</option>
                </select>

            </td>
            <td>
                <button type="button" data-toggle="modal" ng-click="GetAccountBalance(c)" data-target="#ShowPendings">Pendings</button>
                <!-- Modal -->
                <div class="modal fade" id="ShowPendings" role="dialog">
                    <div id="modelPendings" class="modal-dialog">
                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Pendings</h4>
                            </div>
                            <div class="modal-body">

                                <table>
                                    <tr>

                                        <th> Bill Amount </th>
                                        <th>Already Adjusted </th>

                                    </tr>
                                    <tr ng-repeat="rm in ReceiptsViewModel">

                                        <td>
                                            {{rm.Amount}}
                                        </td>
                                        <td>
                                            {{rm.AmountAdjusted}}
                                        </td>

                                    </tr>
                                </table>
                            </div>

                            <div class="modal-footer">

                                <button type="button" class="btn btn-default" style="background-color:#b5fab2">Submit</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal" style="background-color:#b5fab2">Close</button>
                            </div>
                        </div>

                    </div>
                </div>
            </td>
            <td>
                <span id="spAmount">{{PendingAmount}}</span>
            </td>
            <td>
                <input type="text" ng-value="0.00" ng-model="PendingAdjusted" class="input-large" name="tPendingAdjusted" readonly />
            </td>

            <td ng-if="$last">
                <a href="#">
                    <span class="glyphicon glyphicon-plus orange" ng-click="addRow($index,c)"></span>
                </a>
            </td>
            <td ng-if="!$last">
                <a href="#">
                    <span class="glyphicon glyphicon-minus orange" @*data-toggle="modal" data-target="#delteConfirmation"*@ ng-click="deleteRow($index)"></span>
                </a>
            </td>        
        </tr>
    </table>

JS

$scope.rvm = [{}];
    $scope.ReceiptsViewModel = [];
   $scope.GetAccountBalance = function (c) {
    $scope.fetch = true;
    var getPendingData = ReceiptsService.GetPendings(c);
    getPendingData.then(function (d) {
      $scope.ReceiptsViewModel = d.data;
    //subtracting  here
        $scope.PendingAmount = $scope.ReceiptsViewModel[0].Amount - $scope.ReceiptsViewModel[0].AmountAdjusted;

                    $scope.fetch = false;
              });        
}

0 个答案:

没有答案