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，我可以看到该值是正确的，但是select输入设置为空白，而不是实际值。

我在做什么错了？

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

Answer 1

您必须在实现中纠正几件事

当您将'{{application.selectedVersion}}'传递给selectionChanged方法时，它变成原始的string。重新分配给application.selectedVersion时，您必须先使用previousVersion方法将JSON解析为JSON.parse
在track by apk.id集合上使用ng-options。这是必需的，因为无法将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

Answer 2

如果只是从JavaScript代码中删除else条件，则可以实现所需的行为。

您的最终代码应为：

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

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

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

2 个答案: