javascript - 使用 Angular 设置多个对象(选择)

Question

我有以下结构:

period: {
    startDate: new Date(),
    endDate: new Date()
}

现在使用我的选择标签，我应该能够设置开始日期和结束日期。这是因为我的选择显示了 startDate "-"endDate 的选项，如下所示:

<select id="periodId" ng-model="selectedPeriod">
  <option value="{{ period.startDate}}|{{period.endDate }}" ng-repeat="period in periods">{{ period.startDate | date : 'dd-MM-yyyy' }} - {{ period.endDate | date : 'dd-MM-yyyy' }}</option>
</select>

这样我的 selectedDate 应该采用第一个代码示例中指定的格式。

我尝试使用 ng-change 但没有成功。

Answer 1

您应该使用 ng-options 如果你想绑定(bind)到一个对象。来自 Angular 的文档:

In many cases, ngRepeat can be used on elements instead of ngOptions to achieve a similar result. However, ngOptions provides some benefits such as reducing memory and increasing speed by not creating a new scope for each repeated instance, as well as providing more flexibility in how the 's model is assigned via the select as part of the comprehension expression. ngOptions should be used when the model needs to be bound to a non-string value. This is because an option element can only be bound to string values at present.

所以，就你的情况而言:

<select id="periodId" ng-model="selectedPeriod"
    ng-options="period as ((period.startDate | date:'dd-MM-yyyy') + ' - ' + (period.endDate | date:'dd-MM-yyyy')) for period in periods">
</select>

这是一个plunker