При использовании sweetalert, html выпадающий не отражает новую запись - PullRequest
Новая
       1

При использовании sweetalert, html выпадающий не отражает новую запись

0 голосов
/ 19 января 2019

У меня есть раскрывающийся список HTML, и в нем уже есть некоторые записи.Теперь, если пользователь выбирает параметр под названием «Новая версия», я открываю окно предупреждения, спрашивая versionName, и помещаю его в список раскрывающихся элементов, и этот вновь введенный параметр затем выбирается в качестве параметра по умолчанию из раскрывающегося списка.Теперь, когда я использую обычное окно предупреждения JavaScript, все идет гладко.Новая введенная версия является выбранной опцией из выпадающего списка.Однако, когда я начинаю использовать sweetalert, такого поведения больше нет.Что происходит, когда пользователь выбирает «Новая версия», открывается окно с подсчетом сладостей, пользователь вводит имя новой версии, нажимает «ОК», но в раскрывающемся списке все еще отображается выбранное значение как «Новая версия», и я не вижу новую версиюимя в раскрывающемся списке.Я вижу новую версию в раскрывающемся списке только при выборе другого параметра из раскрывающегося списка, который по существу «обновляет» раскрывающийся список, а затем я вижу свое новое значение.

Соответствующий угловой код (с использованием JavaScriptпредупреждение, которое работает нормально): 

$scope.onSetDecisionVersion = function() {
    if($scope.requestDetails.decisionVersion == 'New Version') {
        var newVersionName = prompt("Please provide the name of the new version");
        $scope.requestDetails.decisionVersion = newVersionName;
        $scope.dcnVersions.push(newVersionName);
    }
}

Логика Sweetalert: 

$scope.onSetDecisionVersion = function() {
    if($scope.requestDetails.decisionVersion == 'New Version') {

        swal({
            text:'Enter new version name:',
            content:'input',
            button: {
                text:"Enter",
                closeModal:true,
            },
        }).then(versionName => 
        this.updateDropDownList(versionName));  
    }
} 

 $scope.updateDropDownList = function(versionName) {
        $scope.requestDetails.decisionVersion = versionName;
        $scope.dcnVersions.push(versionName);

    }

HTML-код: 

<label class="col-sm-4 col-form-label">Version</label>
<div class="col-sm-2">
    <select required="required" ng-options="versionName for versionName in dcnVersions"  class="wd100" ng-model="requestDetails.decisionVersion" ng-change='onSetDecisionVersion()'>
        <option ng-selected="true" value="">Select</option>
    </select>
</div>

Я закомментировал часть кода Sweetalert.Код окна предупреждения javascript есть и работает как положено.Я не могу понять, почему раскрывающийся список не отражает немедленно введенную версию со сладким предупреждением.Это CDN, который я использую для sweetalert: 

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

Кроме того, когда я отправляю этот requestDetails.decisionVersion в бэкэнд с логикой sweetalert, reguestDetails.decisionVersion считывает правильное значение, но по какой-либо причине правильноезначение не отражается в раскрывающемся списке.

1 Ответ

0 голосов
/ 19 января 2019

Вам нужно использовать $ timeout, поскольку у angular js другой шаблон синхронизации.

Вот ваш рабочий код jsfiddle: http://jsfiddle.net/4wm1k6qs/

var app = angular.module('sweetalert', []);

app.controller('sacontroller', function($scope, $timeout){
$scope.option = "Select One";
    $scope.options = ["Select One","a", "b", "New Version"];
  $scope.onOptionChange = function(){
  if($scope.option !== "New Version") return;
    onNewVersionSelect();
  }

  function onNewVersionSelect(){
   swal({
            text:'Enter new version name:',
            content:'input',
            button: {
                text:"Enter",
                closeModal:true,
            },
        }).then((text) =>{
            $scope.options.push(text);
          $timeout(function(){
            $scope.option = text;
          })
        })
  }


});

Код в порядке ..Вам нужно использовать $ timeout как 

$timeout(function(){
            $scope.option = text;
          })
...