23

这是一个片段。正如我所料,选择了 Q2。

<select name="quarter" ng-model="Quarter" >
    <option value="1" >Q1</option>
    <option value="2" ng-selected="Quarter=='Q1'">Q2</option>
    <option value="3">Q3</option>
    <option value="4">4</option>
</select>

更改'Q1''Q2' 不会像我预期的那样被选中。现在将ng-selected="Quarter=='Q1'"不会选择 Q1,直到我删除ng-selected="Quarter=='Q2"

wtf。这假设如何工作?

4

4 回答 4

21

如果您将 ng-selected 放在 option 元素上,则当 ng-selected 值为 true 时,您的选项将被选中。在您的情况下,当 Quarter 等于 Q1 时,选择了选项 Q2。

如果要选择 Quarter 中传递的值,则必须将 ng-selected 放在 select 元素上:

<select name="quarter" ng-model="Quarter" ng-selected="Quarter"
        ng-options="Quarter for Quarter in Quarters" >
    {{Quarter}}
</select>

查看select 指令文档

于 2013-04-02T18:53:55.220 回答
5
<select ng-model="hour">
    <option ng-selected="hour == $index" ng-repeat="h in (((b=[]).length=24)&&b) track by $index" ng-bind="$index">{{h}}</option>
</select>

如果你想选择 24 小时,你可以这样做。

于 2015-07-28T12:47:23.903 回答
4

像这样:

<body ng-controller="MainCtrl">
  {{referenceNumber}}
    <select ng-model="referenceNumber">
            <option ng-selected="!referenceNumber">Default</option>
            <option ng-repeat="number in numbers track by $index" ng-value="number">{{number}}</option>
        </select>
  </body>

“我相信 ngSelected 的主要原因之一是根据模型是否设置不正确来设置默认值。” joshkurz 于 2014 年 3 月 3 日发表评论

所以正确的方法是只在你的情况下依赖 ng-model 。做你想做的事情的正确方法(预先选择一个选项)是这样的:

<select ng-model="purchase.product" name="purchase.product" class="u-full-width" ng-options="product.id as product.name for product in products"></select>

参考:

  1. http://plnkr.co/edit/xXq3b40nvqkjPlyCxZNG?p=preview
  2. https://github.com/angular/angular.js/issues/6528
于 2016-03-04T02:39:34.217 回答
1

ng-selected指令采用布尔值或导致真/假布尔结果的表达式。

您只需要传递它的值true以使其工作或导致true.

<select>它与标签的ng-model无关。

以下是此行为的示例:

<select name="quarter" ng-model="Quarter" >
    <option value="1" >Q1</option>
    <option value="2" ng-selected="true">Q2</option>
    <option value="3">Q3</option>
    <option value="4">Q4</option>
</select>

这将使选项 Q2 默认选中。

于 2016-12-29T06:49:56.040 回答