AngularJS возвращает выбранное значение элемента управления, вложенного в ng-repeat при отмене диалога - PullRequest
Новая
       24

AngularJS возвращает выбранное значение элемента управления, вложенного в ng-repeat при отмене диалога

0 голосов
/ 13 сентября 2018

Я хочу вернуть значение тега select , которое находится внутри 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, но вместо действительного значения ввод выбора установлен пустым.

Что я делаю не так?

Демонстрация JSFiddle: https://jsfiddle.net/yt4ufsnh/

Ответы [ 2 ]

0 голосов
/ 13 сентября 2018

Если вы просто удалите условие else из своего кода javascript, вы можете достичь нужного вам поведения.

Ваш окончательный код должен быть: 

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

  if (dialog) {
    console.log('change version confirmed');
  }
};
0 голосов
/ 13 сентября 2018

Вы должны исправить пару вещей в своей реализации

  1. Когда вы передаете '{{application.selectedVersion}}' методу selectionChanged, он становится необработанным string.Когда вы снова присваиваете application.selectedVersion, вы должны сначала проанализировать, что previousVersion - JSON, используя JSON.parse метод
  2. Использовать 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;
    }
};

Обновленная скрипка

...