AngularJs 中的下拉菜单答案

【问题标题】：Dropdown in AngularJsAngularJs 中的下拉菜单
【发布时间】：2017-09-14 13:52:23
【问题描述】：

我有使用 data-ng-options 的下拉代码在下面完美运行：

<select ng-model="selected" data-ng-options="c as c.title group by c.type for c in VacanciesWithSavedSearches | orderBy: ['type','title']"></select>

这需要替换为下面的 md-option 代码：

<md-input-container class="md-block" style="margin:0 !important;">
    <md-select ng-model="VacancySavedSearch" placeholder="Select a Vacancy Or Saved Search" id="Md-selectvss1" name="vss">
        <md-option ng-value="c" ng-repeat="c as c.title group by c.type for c in VacanciesWithSavedSearches | orderBy: ['type','title']">
            {{vs.title}}
        </md-option>
    </md-select>
</md-input-container>

我遇到的问题是 md-option 确实呈现下拉菜单但没有选项项目。我改成 md-option 的原因是因为它从 UI 的角度看起来更好。请知道如何让它工作。

【问题讨论】：

标签： javascript angularjs arrays angular-material

【解决方案1】：

如果您想进行分组，您需要包含来自angular-filter.js 的过滤器指令，然后使用groupBy。请在下面找到实现相同的示例！

JSFiddle Demo

您正在使用ng-options 的语法，但您已经编写了ng-repeat 的代码，这是您代码的工作版本。

JSFiddle Demo

HTML：

<div ng-app='home'>
  <!-- App goes here -->
  <md-content layout-padding ng-controller="MainCtrl as mainCtrl">
    <md-input-container class="md-block" style="margin:0 !important;">
      <md-select ng-model="VacancySavedSearch" placeholder="Select a Vacancy Or Saved Search" id="Md-selectvss1" name="vss">
        <md-option ng-value="c" ng-repeat="c in VacanciesWithSavedSearches | orderBy: ['type','title']">{{c.title}}</md-option>
      </md-select>
    </md-input-container>
  </md-content>
</div>

【讨论】：

它显示下拉选项，但我如何添加分组依据？
@user8427641 这对您有帮助吗？
它在您的示例中完美运行，但当我尝试在我的页面上使用它时却不行。由于某些原因，只要我在 ng-repeat 中添加 groupBy，我的 $scope 集合就会继续添加 _CHANGED":false。
@user8427641 你能用我给的小提琴尝试复制问题并与我分享吗？

【解决方案2】：

你可以这样做：

<md-input-container >
    <label>Select the country</label>
    <md-select ng-model="user.country_id" required style="width: 183px;">
        <md-option ng-value="item.id" ng-repeat="item in countries">{{ item.country_name }}</md-option>
    </md-select>
</md-input-container>

Controller.js

$scope.countries = [
    {
        "country_name": "India",
        "id": 1,
    },
    {
        "country_name": "Australia",
        "id": 2,
    }
]

【讨论】：