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 传递先前 selected 值而不是当前值（此处解释：）。

当我更改 select 值时，执行对话交互并取消它 我尝试通过设置 application.selectedVersion = angular.copy(previousVersion); 恢复该值。我可以通过调试 javascript 看到值是正确的，但是 select 输入设置为空白而不是实际值。

我做错了什么？

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 解析的对象不被识别为用于构建 select 的对象的同一实例，因此这就像覆盖内部 equals 函数一样仅使用其编号 属性

最终版本

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

Answer 2

如果您只是从 javascript 代码中删除 else 条件，就可以达到您需要的行为。

您的最终代码应该是：

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

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