Question

我无法弄清楚为什么数据绑定不会对select标记起作用，因为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模型都不会更改。它总是空白的。

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

我已经完成了几个工作示例，但我看不到我在这里缺少的东西。

编辑：我弄清楚发生了什么。我正在使用的CSS框架根本没有考虑Angular。它使用自己的div和布局为选择渲染自定义视图，同时隐藏实际的select元素。但他们甚至没有将选择动作挂钩到隐藏的选择中，因此角度指令或数据绑定永远不会被触发......任何关于如何将它们组合在一起的线索？

Answer 1

要绑定到选择ng-model上的预选值，您需要使用ng-options。

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

在控制器上定义了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>

source = Why does AngularJS include an empty option in select?

Answer 2

我会使用ng-model和ng-change。只要选定的值发生变化，就会评估Ng变化。

Answer 3

我可以看到它有效。查看下面的代码段

确保您已正确声明控制器和应用
也可以尝试使用ng-options并让值来自控制器，例如this示例。

＆＃13;

angular.module('demo', []).controller('DemoController', function($scope) {
  $scope.logModelValue = function() {
    console.log($scope.startType);
  };
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="demo">
  <div ng-controller="DemoController">
    <label for="start-type">Start type</label>
    <select id="start-type" ng-model="startType" ng-change="logModelValue()">
      <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>
    <span>{{startType}}</span>
    <button ng-click="logModelValue()">Console log model value</button>
  </div>
</body>

＆＃13;

修改
看起来麻烦在于将materializecss和angular一起工作。您可以在materializecss上编写自己的角度包装器，也可以使用此库angular-materialize

AngularJS数据与select标签绑定

3 个答案:

修改