angularjs – 使用异步数据设置默认值

发布时间：2020-12-17 17:12:39 所属栏目：安全来源：网络整理

导读：我有一个下拉列表 select ng-model="referral.organization" ng-options="key as value for (key,value) in organizations"/select 使用$http请求填充组织的位置.我还有一个资源引用,其中包括几个属性,包括与下拉列表中保存的值对应的整数组织.目前,下拉列表

我有一个下拉列表

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

使用$http请求填充组织的位置.我还有一个资源引用,其中包括几个属性,包括与下拉列表中保存的值对应的整数组织.目前,下拉列表工作正常,选择新值将更新我的引荐资源而不会出现问题.

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

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

第二编辑：
问题显然是ngOptions中使用的密钥与ngModel中使用的变量之间的不匹配. < select>选项是从WebAPI返回的字符串(尽管以字典开头),而引用模型返回整数.当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(序列化字典< int,String>到{“key”：“value”})的问题但是这是有用的并且< select&gt ; tag仍然绑定到引用资源.

解决方法

对于简单类型,你可以设置$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;
            }
        });

    };
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!