以编程方式更改 md-select 中的选定项目答案

【问题标题】：change selected item in md-select programmatically以编程方式更改 md-select 中的选定项目
【发布时间】：2016-02-03 20:46:24
【问题描述】：

我想最初（在页面加载时）在 md-select 中设置当前的 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 中被视觉选择，但我从一个计算属性中得到一个错误，它似乎在$first 之前首先评估。因此，我无法将第一个学校课程设置为从 html 中选择的学校课程。我必须通过控制器中的 JS 来完成。

我该怎么做？

【问题讨论】：

标签： angularjs angular-material

【解决方案1】：

你很亲密。换个方式

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

到

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

ng-value 已经需要一个角度表达式 (see here)，因此您无需使用 {{}} 评估该表达式。

编辑：

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

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

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

【讨论】：

啊...是的，我忽略了大括号，谢谢。
如何在 md-select 中获取选中的值？

【解决方案2】：

您可能需要添加 ng-model-options 并在某些标识属性上指定 trackBy - 可能是 id、name 或 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>

【讨论】：

【解决方案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>

【讨论】：