设置所选项目选择的选项

Question

在我离子项目中，我有一个<select>像这样：

<select ng-model="user.bloodType" ng-options="x as x.description for x in formData.bloodTypes"></select> 

所以要澄清，user.bloodType是一个对象，看起来像这样：

{ 
    'id' : 1, 
    'description' : 'O+' 
} 

formData.bloodTypes包含数组以上描述的bloodType对象。所以问题来了 - 我知道user.bloodType绝对是formData.bloodTypes中的一个对象。我怎样才能将<select>设置为user.bloodType是预选的？

Answer 1

如果你不使用参考平等ngModel设置的选项，你可以依靠使用track by表达基于ID平等（ID应该是每个选项是唯一的）：

ng-options="x as x.description for x in formData.bloodTypes track by x.id" 

然后你的ngModel user.bloodType可以被初始化为一个参考不一定匹配的模型。

例如：

<select ng-model="selectedOption" ng-options="x 
      as x.description for x in bloodTypes track by x.id> 

控制器：

app.controller('ctrl', function($scope) { 
    $scope.bloodTypes = [ 
     {'id' : 1, 'description' : 'O+'},   
     {'id' : 2, 'description' : 'A'}, 
     {'id' : 3, 'description' : 'B'}, 
    ]; 

    // set initial selected option to blood type B 
    $scope.selectedOption = {'id' : 3, 'description' : 'B'}; 
}); 

或者，如果你想保留参考平等，你不要需要跟踪：

app.controller('ctrl', function($scope) { 
    $scope.bloodTypes = [ 
     {'id' : 1, 'description' : 'O+'},   
     {'id' : 2, 'description' : 'A'}, 
     {'id' : 3, 'description' : 'B'}, 
    ]; 

    // set initial selected option to blood type B 
    $scope.selectedOption = $scope.bloodTypes[2];  
});