【问题标题】:Can I use md-select and have one option select multiple options?我可以使用 md-select 并让一个选项选择多个选项吗?
【发布时间】:2017-02-21 15:14:43
【问题描述】:

我有以下小样本:

<md-select ng-model="selectedYears" multiple>
  <md-option>10 Years</md-option>
  <md-option value="2016">
  <md-option value="2015">
  <!--- more options -->
</md-select>

我想要的是当用户选择我上面标记为“10 年”的选项时,应该会发生以下等效情况(而不是选择该选项)

$scope.selectedYears = [2016, 2015/*, ... */];

【问题讨论】:

  • 您能否解释一下,您到底想要达到什么目的?
  • @PankajParkar,我希望现在更好,缩短了很多
  • 结帐答案,我也为你创建了 Codepen :)

标签: angularjs material-design angular-material md-select


【解决方案1】:

您可以将更改事件放在您的select 上,这样只要选择了10 years,您就可以手动持续 10 年。此外,您必须将 value 更改为 ng-value,以便将值视为 number 类型而不是 string

标记

 <md-select ng-model="selectedYears" multiple ng-change="yearChanged(selectedYears)">
    <md-option ng-value="10">10 Years</md-option>
    <md-option ng-value="2016">2016</md-option>
    <md-option ng-value="2015">2015</md-option>
    <md-option ng-value="2014">2014</md-option>
    <md-option ng-value="2013">2013</md-option>
    <md-option ng-value="2012">2012</md-option>
    <md-option ng-value="2011">2011</md-option>
    <md-option ng-value="2010">2010</md-option>
    <md-option ng-value="2009">2009</md-option>
    <md-option ng-value="2008">2008</md-option>
  </md-select>
</md-select>

Forked Pen

【讨论】:

  • 这行得通,但是在我的情况下,有一些问题使它难以使用。首先,我已经连接了一个 ng-change 方法——有点麻烦。其次,我必须使特殊选项的 ng-value 与内部 ng-change 保持同步,这对任何读者来说都不是很明显。总而言之,这可行,但可能不会通过代码审查。不过感谢您的努力。
  • @WorldSEnder 能否详细说明ng-change 钩子有什么问题?
  • 我必须在 hooked 方法中重复特殊选项的 ng-value。我想象的是所有的钩子都是本地的 md-option 元素。不过我会使用它,让 codereview 决定它是否可以接受。
猜你喜欢
  • 2021-07-28
  • 1970-01-01
  • 2022-01-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-08-13
  • 2015-08-23
  • 2018-03-24
相关资源
最近更新 更多