当我在下拉列表中更改状态时，它会以角度js更改实际范围中的值

Question

我有4个(ALL,PAID,UNPAID,PARTIALLY_PAID)付款状态，我必须根据我需要显示发票清单的付款状态对这些付款状态进行过滤。

情况1：

当前付款状态为ALL且我要将付款状态更改为其他状态时，其工作正常。

案例2：

当当前状态不是ALL而我将要将支付状态更改为其他状态时，它无法正常工作，更改实际范围对象中的更改值而不保存。

我希望保存后更改应该发生。

取消按钮也是如此。

代码HTML部分：

<tbody ng-repeat="clientPayment in clientPaymentDetails">
                    <tr
                        style="text-align: center">
                        <td colspan="3" ng-click="showContent(clientPayment.project.name);showData= !showData">{{clientPayment.project.name}}({{clientPayment.project.projectType}})</td>
                        <td colspan="3">{{clientPayment.project.currency}}</td>
                        <td colspan="3">
                            <!-- <select ng-model="selectedStatus" ng-options="payStatusType.code as payStatusType.type for payStatusType in payStatus"
                            ng-change= "fetchPaymentStatus(selectedStatus, clientPayment.project.name)"></select> -->

                            <select ng-model="selectedStatus" ng-required="true">
                                 <option value="">ALL</option>
                                <option ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
                            </select>
                        </td>
                    </tr>

                    <tr
                        ng-show="model.activeRow == clientPayment.project.name && showData" style="text-align: center; 
                        background-color: #5dbbb0 !important; height: 45px; color: white">
                        <th>Invoice ID</th>
                        <th>Invoice Number</th>
                        <th>Invoice Date</th>
                        <th>Invoice Amount</th>
                        <th>Accrual Date</th>
                        <th>Due Date</th>
                        <th>Payment Status</th>
                        <th>Amount Received</th>
                        <th>Action</th>
                    </tr>

                    <tr
                        ng-show="model.activeRow == clientPayment.project.name && showData"
                        style="text-align: center; height: 45px"
                        ng-repeat="invoice in clientPayment.invoiceList |filter: (!!selectedStatus || undefined) && {paymentStatus: selectedStatus}: true">
                        <td ng-show="!isEdit">{{invoice.invoiceId}}</td>
                        <td ng-show="!isEdit">{{invoice.invoiceNo}}</td>
                        <td ng-show="!isEdit">{{invoice.invoiceDate}}</td>
                        <td ng-show="!isEdit">{{invoice.invoiceAmount}}</td>
                        <td ng-show="!isEdit">{{invoice.accrualDate}}</td>
                        <td ng-show="!isEdit">{{invoice.dueDate}}</td>
                        <td ng-show="!isEdit">{{invoice.paymentStatus}}</td>    
                        <td ng-show="!isEdit">{{invoice.amountReceived}}</td>
                        <td ng-show="!isEdit">
                        <button class="btn btn-success" ng-click="isEdit= !isEdit"> <i class="fa fa-pencil-square-o" aria-hidden="true" ></i></button>
                        </td>   


                        <td ng-show="isEdit">{{invoice.invoiceId}}</td>
                        <td ng-show="isEdit">{{invoice.invoiceNo}}</td>
                        <td ng-show="isEdit">{{invoice.invoiceDate}}</td>
                        <td ng-show="isEdit">{{invoice.invoiceAmount}}</td>
                        <td ng-show="isEdit">{{invoice.accrualDate}}</td>
                        <td ng-show="isEdit">{{invoice.dueDate}}</td>
                        <td ng-show="isEdit"><select ng-model="invoice.paymentStatus">
                        <option  ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
                        </select></td>
                        <td ng-show="isEdit"><input type="text" ng-model="invoice.amountReceived"></td>
                        <td colspan="2" ng-show="isEdit">
                        <button class="btn btn-primary" ng-click="updateInvoiceDetails(invoice);isEdit= !isEdit"> <i class="fa fa-save" aria-hidden="true" ></i></button>
                        <button class="btn btn-danger" ng-click="isEdit= !isEdit"><i class="fa fa-remove" ></i></button>
                        </td>
                    </tr>
                </tbody>
            </table>

控制器代码：

        $scope.getClients = function() {
            rpmDashboardService.getAllClientsByBusinessUnitId($scope.bu_id)
                    .then(function(response) {
                        console.log(response.data);
                        $scope.Client_List = response.data;
                    });
        };
    }

    $scope.onClientChange = function(clientId) {
        rpmDashboardService.getAllInvoicesList(clientId).then(
                function(response) {
                    $scope.clientProjects = response.data;

                    var data = angular.copy($scope.clientProjects);
                    $scope.clientPaymentDetails = data;
                    console.log($scope.clientPaymentDetails);
                });
    }

    $scope.showContent = function(name) {
        $scope.model = {
            activeRow : name
        };
    }

    $scope.updateInvoiceDetails=function(invoice){
        if(invoice.amountReceived == null || invoice.amountReceived == "" || invoice.paymentStatus==="" || invoice.paymentStatus==null){
                noty({type:'error',
                    text:'Please enter some amount into Amount Received...'});
        }
        else{
            rpmDashboardService.updateInvoiceDetails(invoice).then(function (response) {

        if (response.status!=200) {
          noty({type:'error',
              text:'Some error occured'});
             }
        else if(!response.data){
             noty({type:'error',
              text:'Invoice can\'t be added'});
             }
        else{

              noty({type:'success',
              text:'New Invoice Details Updated Successfully'});

             }

    });
    }

    }

请找到以下屏幕截图：[对于案例1][1]

Answer 1

您正在使用ng-model更新相同的范围，它会立即反映在您的完整clientPaymentDetails变量中。

使用下面

 <select ng-model="paymentSt" ng-change="updateData(paymentSt,invoice)">
     <option  ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
 </select>

代替

<select ng-model="invoice.paymentStatus">
   <option  ng-repeat="payStatusType in payStatus" value="{{payStatusType.code}}">{{payStatusType.type}}</option>
</select>

使用ng-change方法更新发票副本中的paymentSt并将其放入范围。当您保存时，请将此发票（从原始发票和更新的付款状态复制到其中）获取并获取paymentStatus并使用它进行保存。