angularjs - 使用异步数据设置默认的<select>值

我有一个下拉列表

<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>模型返回整数时，referral选项从WebAPI作为字符串返回（尽管以Dictionary开始）。将referral.organization放在ngModel中时，Angular不能将2723匹配为“ 2723”，依此类推。

我尝试了几种不同的方法，但是以下方法效果很好，对我来说是“最干净的”。在$ resource GET的回调中，我只是将必要的变量更改为字符串，如下所示：

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

不确定Angular（不匹配1000与“ 1000”）或WebAPI（将Dictionary<int,String>序列化为{ "key":"value" }）是否被认为是问题，但这是有效的，并且<select>标记仍绑定到referral资源。

最佳答案

对于简单类型，您只需设置$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'
    };
}

如果您使用的是对象，则它会变得比较棘手，因为Angular似乎不够聪明，无法知道新对象实际上是相同的。除非有一些Angular hack，否则我向前看的唯一方法是从服务器加载$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;
            }
        });

    };
}