我有一个具有多项选择的角度材料md-select
元素,我定义如下:
<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
指令的模型,因此我预计它将使第一个选择选项变为选中状态。但它没有用。我在文档中找不到任何以编程方式选择md-select
元素的方法。
由于您将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
是角度指令,因此不应使用{{ }}
。查看有关ngValue的官方文档