<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> ; tag仍然绑定到引用资源.
解决方法
<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中的值,如：
<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;
}
});
};
}
