AngularJS 在對話框取消時恢復嵌套在 ng-repeat 中的控件的選定值

Question

我想在取消確認對話框后恢復ng-repeat 中的選擇標記值。

這是我到目前為止所擁有的：

相關 HTML ：

<table>
  <tbody>
    <tr ng-repeat="application in rows">
      <td>
        <select
                ng-model="application.selectedVersion"
                ng-options="apk.versionName for apk in application.versions | orderBy : 'id' : true"
                ng-init="application.selectedVersion=application.versions.filter(currentVersion, application.apkUpdates)[0]"
                ng-change="selectionChanged(application, '{{application.selectedVersion}}')"
                style="padding:0 1em;" />
      </td>
    </tr>
  </tbody>
</table>

Javascript 邏輯：

$scope.selectionChanged = function(application, previousVersion) {
  var dialog = confirm('Change version?');

  if (dialog) {
    console.log('change version confirmed');
  } else {
    application.selectedVersion = previousVersion;
  }
};

將'{{application.selectedVersion}}'傳遞給函數而不是application.selectedVersion傳遞先前選擇的值而不是當前值（在此處解釋： https : //stackoverflow.com/a/45051464/2596580 ）。

當我更改選擇值時，執行對話框交互並取消它我嘗試通過設置application.selectedVersion = angular.copy(previousVersion);來恢復該值application.selectedVersion = angular.copy(previousVersion); . 我可以通過調試 javascript 看到該值是正確的，但選擇輸入設置為空白而不是實際值。

我究竟做錯了什么？

JSFiddle 演示： https ://jsfiddle.net/yt4ufsnh/

Answer 1

你必須在你的實現中糾正幾件事

1. 當您將'{{application.selectedVersion}}'傳遞給selectionChanged方法時，它會變成原始string 。 當您重新分配回application.selectedVersion您必須首先使用JSON.parse方法將該previousVersion解析為JSON
2. 在ng-options集合上使用track by apk.id 。 這是必需的，因為 JSON 解析的對象不被識別為用於構建選擇的對象的同一實例，因此這就像覆蓋一個內在的equals函數以僅使用其 id 屬性一樣

最終版本

ng-options="apk.versionName for apk in (application.versions | 
                                           orderBy : 'id' : true) track by apk.id" 

代碼

$scope.selectionChanged = function(application, previousVersion) {
    var dialog = confirm('Change version?');
    if (dialog) {
      console.log('change version confirmed');
    } else {
      application.selectedVersion = previousVersion ? JSON.parse(previousVersion) : null;
    }
};

更新的小提琴

Answer 2

如果你只是從你的 javascript 代碼中刪除 else 條件，你就可以達到你需要的行為。

你的最終代碼應該是：

$scope.selectionChanged = function(application, previousVersion) {
  var dialog = confirm('Change version?');

  if (dialog) {
    console.log('change version confirmed');
  }
};