以编程方式更改 md-select 中的 selected 项目

Question

我想最初（在页面加载时）在 md-select 中设置当前 schoolclass 项目。

此代码设置了 selected schoolclass，但未在视觉上反映在 md-select 中。

$scope.selectedSchoolclass = schoolclasses.length > 0 ? schoolclasses[0] : null;

<md-input-container>
    <label>Schoolclasses</label>
    <md-select ng-model="selectedSchoolclass"  md-on-close="getPupils()">
        <md-option ng-repeat="s in schoolclasses" ng-value="{{s}}">
            {{s.schoolclassNumber}}
        </md-option>
    </md-select>
</md-input-container>

当我使用 md-selected="$first" 时，它会在 md-select 中进行可视化 select 编辑，但我从计算的属性中得到一个错误，它似乎在之前首先评估$第一个。因此，我无法将第一个班级设置为 html 的 selected 班级。我必须通过控制器中的 JS 来完成。

我该怎么做？

Answer 1

你很接近。只需更改

<md-option ng-repeat="s in schoolclasses" ng-value="{{s}}">

到

<md-option ng-repeat="s in schoolclasses" ng-value="s">

ng-value 已经在期待一个 angular 表达式 (see here)，因此您不需要使用 {{}} 评估表达式。

编辑：

另外，我假设你的意思是：

$scope.selectedSchoolclass = $scope.schoolclasses.length > 0 ? $scope.schoolclasses[0] : null;

schoolclasses 必须是 $scope.schoolclasses 因为您在模板中引用了它。

Answer 2

您可能需要添加 ng-model-options 并在某些标识属性上指定 trackBy - 可能是 id、名称或 schoolclassNumber。

此外，确保删除 ng-value 上的 {{}}。

<md-select ng-model="selectedSchoolclass"  md-on-close="getPupils()" ng-model-options="{trackBy: '$value.schoolclassNumber'}">
    <md-option ng-repeat="s in schoolclasses" ng-value="s" ng-bind="s.schoolclassNumber"></md-option>
</md-select>

我也不确定这里分配 null 是否有问题，也许试试 undefined.

在 ng-repeat 上指定 track by 也是一个好习惯。再次，使用您的标识属性.

<md-option ng-repeat="s in schoolclasses track by s.schoolclassNumber" ng-value="s" ng-bind="s.schoolclassNumber"></md-option>

Answer 3

只需像这样更改您的 md-select

  <md-select ng-model="selectedSchoolclass"  md-on-close="getPupils()">
        <md-option ng-repeat="s in schoolclasses" ng-value="{{s}}">
            {{s.schoolclassNumber}} ng-selected="{{ selectedSchoolclass.indexOf(s.schoolclassNumber) > -1}}"
        </md-option>
    </md-select>

以编程方式更改 md-select 中的 selected 项目

change selected item in md-select programmatically

angularjs

angular-material