Настройка по умолчанию <select> значение с асинхронными данными

Question

У меня есть выпадающий список

<select ng-model="referral.organization" 
    ng-options="key as value for (key, value) in organizations"> 
</select> 

где organizations заполняется с использованием запроса $ HTTP. У меня также есть ресурс referral, который включает в себя несколько свойств, включая целое число organization, которое соответствует значению, сохраненному в раскрывающемся списке. В настоящее время выпадающее меню отлично работает и выбирая новое значение, обновит мой referral ресурс без проблем.

Однако, когда страница загружается, раскрывающийся список пуст, а не отображает значение referral.organization, полученное с сервера (то есть при открытии ранее сохраненной формы referral). Я понимаю, что это, вероятно, связано с тем, что мой ресурс пуст, когда страница загружается первой, но как я могу обновить раскрывающийся список, когда информация была успешно восстановлена?

Редактировать: {{ organizations[referral.organization] }} успешно отображает выбранное значение, если оно размещено где-то в другом месте на странице, но я не знаю, как дать тегу это выражение для отображения.

Вторая редакция: Проблема была, по-видимому, несоответствием между ключом, используемым в ngOptions, и переменной, используемой в ngModel. Опция <select> возвращалась как строки из WebAPI (несмотря на начало словаря), а модель referral возвращала целые числа. Когда referral.organization был помещен в ngModel, Angular не соответствовал 2723 на «2723» и так далее.

Я пробовал несколько разных вещей, но следующее хорошо работает и является «самым чистым» для меня. В функции обратного вызова для ГЭТ $ ресурсов, я просто изменить необходимые переменные строки следующим образом:

$scope.referral = $resource("some/resource").get(function (data) { 
       data.organization = String(data.organization); 
       ... 
      }); 

Не уверен, если это будет рассматриваться как проблема с угловым (не соответствует 1000 к «1000») или WebAPI (сериализация Dictionary<int,String> до { "key":"value" }), но это функционально, и тег <select> по-прежнему связан с ресурсом referral.

Answer 1

Другие ответы были правильными в том смысле, что они обычно «просто работают». Проблема была в конечном счете несоответствием между ключом organization (целое число), хранящимся внутри $scope.organizations, и ключ, сохраненный в ответе $http, который хранится в JSON и поэтому в виде строки. Угловое не соответствовало строке целому числу. Как я уже упоминал в своем редактировании исходному вопросу, решением в то время было отправить данные ответа $http в строку. Я не уверен, что текущие версии Angular.js все еще ведут себя таким образом.

Answer 2

Для простых типов вы можете просто установить $scope.referral.organization, и это будет волшебно работать:

http://jsfiddle.net/qBJK9/

<div ng-app ng-controller="MyCtrl"> 
    <select ng-model="referral.organization" ng-options="c for c in organizations"> 
    </select> 
</div> 

-

function MyCtrl($scope) { 
    $scope.organizations = ['a', 'b', 'c', 'd', 'e']; 
    $scope.referral = { 
     organization: 'c' 
    }; 
} 

Если вы используете объекты, это становится сложнее, так как Угловое не кажется достаточно умным, чтобы знать, что новый объект практически тот же.Если нет какой-то Угловая хак, единственный способ, которым я вижу вперед, чтобы обновить $scope.referral.organization после того, как загружается с сервера и присвоить ему значение от $scope.organizations как:

http://jsfiddle.net/qBJK9/2/

<div ng-app ng-controller="MyCtrl"> 
    <select ng-model="referral.organization" ng-options="c.name for c in organizations"></select> 
    {{referral}} 
    <button ng-click="loadReferral()">load referral</button> 
</div> 

-

function MyCtrl($scope) { 
    $scope.organizations = [{name:'a'}, {name:'b'}, {name:'c'}, {name:'d'}, {name:'e'}]; 
    $scope.referral = { 
     organization: $scope.organizations[2] 
    }; 
    $scope.loadReferral = function() { 
     $scope.referral = { 
      other: 'parts', 
      of: 'referral', 
      organization: {name:'b'} 
     }; 

     // look up the correct value 
     angular.forEach($scope.organizations, function(value, key) { 
      if ($scope.organizations[key].name === value.name) { 
       $scope.referral.organization = $scope.organizations[key]; 
       return false; 
      } 
     }); 

    }; 
}