设置选中项选中选项

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

设置选中项选中选项

Set selected item selected option

angularjs

ionic-framework

ionic