Проблемы AngularJS с выбранным значением ng-options

Я столкнулся со странной проблемой при использовании ng-options с AngularJS.

Мой сценарий довольно прост:

  1. Привяжите значение с помощью ng-model к выбранной опции
  2. Загрузите значения «выбрать» из бэкэнда
  3. Привяжите загруженные значения к 'select'

Мои объекты, загруженные из бэкэнда, представляют собой ключ/значение, например:

{
   Value: "my_value",
   Name: "my_name"
}

И все работает нормально... Пока имя и значение не совпадают. Тогда angular больше не будет корректно связывать выбранное значение.

Я создал этот плункер: https://plnkr.co/edit/tUBXIpMTBAHK2Xh8aDu6?p=preview Чтобы продемонстрировать проблему.

Мой контроллер:

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

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.name = 'World';

  $timeout(function(){
    $scope.values = [
        { Name: "Accepted", Value: "Accepted" },
        { Name: "Not accepted", Value: "NotAccepted" },
        { Name: "Not at all accepted", Value: "NotAtAllAccepted" }
      ];
  }, 2000);

  $scope.selectedValue = "Accepted";
  //$scope.selectedValue = "NotAccepted";
  //$scope.selectedValue = "NotAtAllAccepted";
});

Если выбранное значение в примере плунжера установлено на «Принято», оно не будет работать. Но если выбранное значение установлено на какое-то другое значение - тогда работает нормально.

И мой HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Hello {{selectedValue}}!</p>

    <select ng-model="selectedValue" ng-options="orderStatus.Value as orderStatus.Name for orderStatus in values"></select>

  </body>

</html>

Кто может просветить меня по этому поводу?

Спасибо!

ОБНОВЛЕНИЕ

Похоже, он отлично работает в Firefox. Но в Chrome и IE проблема все еще возникает.


angularjs ng-options
person mikkelbm    schedule 12.01.2016    source источник
comment
Итак, когда вы просматриваете пример plunkr, выбранное значение в раскрывающемся списке установлено на «Принято»?   -  person mikkelbm    schedule 12.01.2016
comment
Я вижу задержку, но это работает   -  person Vamsi    schedule 12.01.2016
comment
Когда вы говорите, что это работает, я не уверен, что мы говорим об одном и том же. Установлено ли выбранное значение в раскрывающемся списке «Принято» при входе на страницу? Никакого взаимодействия со страницей...   -  person mikkelbm    schedule 12.01.2016
comment
Вы используете Firefox? Потому что на самом деле он работает в Firefox, но не в Chrome или IE...   -  person mikkelbm    schedule 12.01.2016
comment
да, я использую Firefox   -  person Vamsi    schedule 12.01.2016

Ответы (1)


arrow_upward

arrow_downward

person    schedule
comment
Пример plunkr — это упрощенная версия моего кода. Я не могу установить selectedValue внутри $timeout, потому что эта логика скрыта в сервисе. - person mikkelbm; 12.01.2016
comment
И если вы попытаетесь запустить код с выбранным значением, установленным в «NotAccepted», вне тайм-аута. Все работает нормально... Проблема возникает только тогда, когда значение совпадает с именем. - person mikkelbm; 12.01.2016