AngularJS-如何在select中预选值？

Question

我有一系列可用的选择项目：

// Default available date formats
        $scope.dateformats = [
            {
                code: 'YY.MM.DD',
                name: 'YY.MM.DD'
            },
            {
                code: 'DD.MM.YY',
                name: 'DD.MM.YY'
            }
        ];

我正在尝试像这样默认默认值：

$scope.actualDateformat = $scope.dateformats[0].code;

<select ng-options="dateformat.name for dateformat in dateformats" ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
   <option style="display:none" value="">{{actualDateformat}}</option>
</select>

问题是，“预选”值作为第一选项标签显示在列表中>

<option style="display:none" value="">{{actualDateformat}}</option>

从剩余的两个动态添加的项目中选择任何一个后，第一个选项中的文本将附加所选项目的文本（和值）。

请问如何解决？

我想要这样的结果：

<select>
  <option value="YY.MM.DD">YY.MM.DD</option>
  <option value="DD.MM.YY" selected>DD.MM.YY</option>
</select>

谢谢你的帮助。

Answer 1

这是FIDDLE

您的问题是您要选择整个对象而不是该对象的代码字段。

dateformat.name for dateformat in dateFormats
    label  : dateformat.name 
    object : dateformat

dateformat.code as dateformat.name for dateformat in dateformats
    label  : dateformat.name
    object : dateformat.code

我也不明白display:none option的需要。

您可以像这样选择dateformat.code 。

<select ng-options="dateformat.code as dateformat.name for dateformat in dateformats" ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
</select>

Answer 2

更改：

<select ng-options="dateformat.name for dateformat in dateformats"
        ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
    <option style="display:none" value="">{{actualDateformat}}</option>
</select>

至：

<select ng-options="dateformat.code as dateformat.name for dateformat in dateformats"
        ng-model="actualDateformat" ng-change="changeDateFormat(dateformat)">
</select>

这样，select应该可以识别dateformat.code与actualDateformat相匹配的actualDateformat 。

该博客提供了有关ng-options 一些很好的示例 。

举个例子：

假设：

$scope.array = [
    { key: 1, value: 'Display text 1!' },
    { key: 2, value: 'Display text 2!' },
    { key: 3, value: 'Display text 3!' }
]

然后，使用以下选项：

<select ng-options="item.key as item.value for item in array" ng-model="result">

将导致：

<select ...>
    <option value="1">Display text 1!</option>
    <option value="2">Display text 2!</option>
    <option value="3">Display text 3!</option>
</select>

$scope.result将设置为这些选项元素的value属性。
如果将$scope.result初始化为2 ，则"Display text 2!" 应该选择。