以编程方式 select 一个 md-select 选项

Question

我有一个 angular-material md-select 元素，其中包含多个 selection，我这样定义：

<md-select ng-model="selectedTypes"
           ng-change="typesChanged()"
           multiple
           ng-disabled="availableTypes.length == 0">
           <md-option ng-repeat="type in availableTypes" ng-value="{{type}}">
              {{type.displayName}}
           </md-option>
</md-select>

在控制器加载期间，我从服务器加载可用类型的数组，然后将 selectedTypes 设置为 availableTypes[0]（在加载 availableTypes 之后），如下所示：

$scope.promise = Types.query(query, function (types) { // Types is a $resource
        $scope.availableTypes = types;
        $scope.selectedTypes = [$scope.availableTypes[0]];
});

因为 selectedTypes 是 md-select 指令的模型，我预计它会使第一个 selection 选项成为 selected。但它没有用。我无法在文档中找到以编程方式 select md-select.

中的元素的任何方式

Answer 1

由于您将 md-select 与 multiple 一起使用，因此您绑定到 md-select 的模型必须是一个数组，并且您在代码中这样定义。

$scope.selectedTypes = [$scope.availableTypes[0]];

不代表数组。您只需将您在 md-option 中指定的值添加到该模型。

$scope.selectedTypes = []; //defined array
$scope.selectedTypes.push($scope.availableTypes[0]);

查看以下笔作为工作示例。

http://codepen.io/next1/pen/qZKzMy

在您的代码中使用了 ng-value="{{type}}。由于 ng-value 是 angular 指令，因此您不应使用 {{ }}。查看有关 ngValue

的官方文档

以编程方式 select 一个 md-select 选项

Programmatically select an md-select option

angularjs

angular-material