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

问题描述 投票:2回答:2

我想在取消确认对话框后恢复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い

javascript angularjs angularjs-ng-repeat angularjs-ng-model angularjs-ng-init
2个回答
1
投票

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

  1. 当你通过https://jsfiddle.net/yt4ufsnh/'{{application.selectedVersion}}'方法,它变成原始selectionChanged。当你重新分配回string时,你必须首先使用application.selectedVersion方法解析previousVersionJSON
  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; } };


0
投票

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

你的最终代码应该是:

Updated Fiddle
© www.soinside.com 2019 - 2024. All rights reserved.