以编程方式选择md-select选项

Question

我有一个具有多个选择的角材料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指令的模型，所以我预计它将使第一个选择选项变为selected。但没起作用。我在文档中找不到以编程方式在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是角指令，所以不应该使用{{ }}。看看关于ngValue的官方文件