如何通过角度下拉列表中的ng-options设置所选选项?

时间:2015-04-02 09:41:01

标签: angularjs

My code is like 

$scope.items = [{
"hospital_id":"hosp55121069e3cb0",
"hospital_name":"Sri Durga Clinic",
"locality":"Amasebail",
"speciality_name" : "Bone and Joint"
},
{
"hospital_id":"hosp55121069e3acd",
"hospital_name":"Apollo Clinic",
"locality":"Chennai",
"speciality_name" : "Cardiology"
}];
$scope.selectedHospital = null;
if(localStorage.getItem('selectedItem')) {
   $scope.selectedHospital = JSON.parse(localStorage.getItem('selectedItem'));

} else {
   $scope.selectedItem = $scope.items[1];
}
$scope.combined = function(item) {
     if (item.locality == undefined || item.locality == '') {
        return item.hospital_name;
     } else {
        return item.hospital_name + " " + item.speciality_name + " (" + item.locality + ")";
     }
}

$scope.update = function() {
        localStorage.setItem('selectedItem',  JSON.stringify($scope.selectedItem))

    }

当我通过localStorage值设置selectedItem时,它不选择给定的值。但如果我通过$ scope.items [index]设置它就可以了。

我的HTML如下:

<select ng-model="selectedItem" ng-change="update()" ng-options="combined(item) for item in items">           

1 个答案:

答案 0 :(得分:1)

ng-options而言,您可以使用对象本身设置selectedItem。 Angular会将相应的项目设置为已选中。您无需提及具体值。

这就是为什么,当你使用

$scope.selectedItem = $scope.items[index] 

有效。因为对象绑定了选项的值。

当您通过localStorage设置时,

if(localStorage.getItem('selectedItem')) {
   $scope.selectedHospital = JSON.parse(localStorage.getItem('selectedItem'));

} else {
   $scope.selectedItem = $scope.items[1];
}

您实际上是在对象进行字符串化并存储它。所以对象与之前的对象不同。您需要遍历项列表并通过匹配该对象的属性来查找。

另请注意,您将值设置为selectedHospital而不是selectedItem。但是在您的select中,您使用ng-model="selectedItem"作为模型。