私はドロップダウンの状態を変更しているときに、角度js内の実際のスコープの値を変更します

Question

私は4 (ALL,PAID,UNPAID,PARTIALLY_PAID)の支払いステータスを持っています、そして、私はこれらの支払いステータスを支払ステータスに基づいて適用しなければなりません。請求書。

ケース1：

現在の支払い状況はALLと私はいくつかの他のステータスその作業罰金に 支払状況を変更するつもりです。

ケース2：現在のステータスはALLよりも他の人と私はその で変更された値を変更し正常に動作していないそのいくつかの他のステータスに変更に payement状況をつもりです

実際のスコープオブジェクトは保存されません。

保存後に変更が必要な場合があります。

キャンセルボタンでも同じことが起こっています。

コード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-使用していますモデルは同じスコープで更新され、すぐに反映されますdをあなたの完全なclientPaymentDetails変数に追加します。

代わりに請求書のコピーでpaymentStを更新し、スコープにそれを置くため

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

使用NG-変更方法の

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

以下の使用。その時に保存するときは、この請求書（元の請求書と更新された支払い状況からコピーされたもの）を取り込み、paymentStatusを取得して保存するために使用します。