javascript - AngularJS 在对话框取消时恢复嵌套在 ng-repeat 中的控件的选定值

Question

我想在取消确认对话框后还原 ng-repeat 中的 select 标记值。

这是我目前所拥有的:

相关 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); 来恢复该值。我可以通过调试 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;
    }
};

Updated Fiddle