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>

问题是，“预选”值会在列表中显示为第一个选项标记＆gt;

<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>

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>

这样，选择应识别dateformat.code匹配actualDateformat的项目。

This blog has some good examples关于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!"。

AngularJS - 如何在select中预选值？

2 个答案: