设置所选项目选择选项

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];    
});