javascript - AngularJS - 如何在选择中预先选择值？

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>

问题是，“预选”值作为第一个选项标 checkout 现在列表中>

<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

此外，我不明白 option 与 display:none 的需要。

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

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