Question

我有一个下拉列表

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

使用$ http请求填充organizations。我还有一个资源referral，其中包含多个属性，包括与下拉列表中保存的值对应的整数organization。目前，下拉列表工作正常，选择新值将更新我的referral资源而不会出现问题。

但是，当页面加载时，下拉列表是空白的，而不是显示从服务器检索的referral.organization的值（即，打开以前保存的referral表单时）。我知道这可能是由于我的资源在页面首次加载时为空，但如何在成功检索信息后更新下拉列表？

编辑： {{ organizations[referral.organization] }}成功列出所选的值，如果放在页面的其他位置，但我不知道如何给这个表达式显示标记。

第二次编辑：问题显然是ngOptions中使用的密钥与ngModel中使用的变量之间的不匹配。 <select>选项作为字符串从WebAPI返回（尽管以字典开头），而referral模型返回整数。当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> tag仍然绑定到referral资源。

Answer 1

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

    };
}

Answer 2

您可以将referral.organization指定给从ajax获取的对象之一：

$scope.referral.organization = $scope.organizations[0]

我在plunker创建了简单的演示。按钮单击处理程序更改对象列表并选择默认对象。

$scope.changeModel = function() {
  $scope.listOfObjects = [{id: 4, name: "miss1"},
                          {id: 5, name: "miss2"},
                          {id: 6, name: "miss3"}];
  $scope.selectedItem = $scope.listOfObjects[1];
};

Answer 3

其他答案是正确的，因为它通常“正常”。问题最终是存储在organization内的$scope.organizations密钥（整数）与存储在$http响应中的密钥之间的不匹配，该密钥存储在JSON中，因此存储为字符串。 Angular没有将字符串与整数匹配。正如我在编辑原始问题时提到的那样，当时的解决方案是将$http响应数据转换为字符串。我不确定当前版本的Angular.js是否仍然以这种方式运行。

使用异步数据</select>设置默认<select>值

3 个答案: