javascript - AngularJS 数据与 select 标签绑定(bind)

Question

我无法弄清楚为什么数据绑定(bind)在选择标记上不起作用，如 docs指定。

这是我选择的元素:

<select id="start-type" ng-model="startType">
  <option value="day-of-week">Day of the week</option>
  <option value="month">Month</option>
  <option value="month-day">Day and month</option>
  <option value="year">Year</option>
  <option value="year-month">Month and year</option>
  <option value="local-time" selected>Time</option>
  <option value="local-date">Date</option>
  <option value="local-date-time">Date and time</option>
</select>
<label for="start-type">Start type</label>

问题是，每当选择一个项目时，$scope.startType 模型都不会更改。它总是空白。

我尝试在 Controller 中定义 $scope.startType 但我不明白为什么这会改变任何东西，因为它应该像现在一样工作。当然，这没有帮助。

我已经浏览了几个工作示例，但我看不出我在这里缺少什么。

编辑:我知道发生了什么。我使用的 CSS 框架根本没有考虑 Angular。它使用自己的 div 和布局为选择呈现自定义 View ，同时隐藏实际的选择元素。但他们甚至没有将选择操作挂接到隐藏的选择中，因此 Angular Directive(指令)或数据绑定(bind)永远不会被触发...关于如何将它们放在一起的任何线索？

Answer 1

为了绑定(bind)到 select 的 ng-model 上预先选定的值，您需要使用 ng-options 。

<select id="start-type" 
        ng-model="startType" 
        ng-options="type.value as type.label for type in startTypes">

在 Controller 上定义 startTypes 的位置:

$scope.startTypes = [{value:'day-of-week', label:'Day of Week'}, ...]

编辑

根据下面 @John S 的评论，您可能需要在 $scope.startType == undefined 时添加默认/空白选项，以便 UI 正确呈现。

<option ng-selected="true" value="">select a market vertical</option>

来源=Why does AngularJS include an empty option in select?