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

Posted 2021-04-09

我想在取消确认对话框后恢复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);来恢复该值。我可以通过调试javascript看到值是正确的，但select输入设置为空白而不是实际值。

我究竟做错了什么？

JSぇdでも但是：z zxswい

答案

您必须在实现中更正一些事情

1. 当你通过https://jsfiddle.net/yt4ufsnh/到'{{application.selectedVersion}}'方法，它变成原始selectionChanged。当你重新分配回string时，你必须首先使用application.selectedVersion方法解析previousVersion到JSON
2. 在JSON.parse收藏中使用track by apk.id。这是必需的，因为JSON解析对象不被识别为用于构建select的对象的相同实例，因此这就像覆盖内部ng-options函数以仅使用其id属性一样

最终版本

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; } };

另一答案

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

你的最终代码应该是：

Updated Fiddle