将 ng-model 分配给 ng-repeat（用于下拉选择）

Question

这是参考随附的jsfiddle。 http://jsfiddle.net/n1cf938h/

如 fiddle 所示，ng-repeat 生成一个日期列表。我想知道用户选择了哪个下拉选项。在这种情况下我如何使用 ng-model ？

HTML-

<div ng-app ng-controller="Ctrl">
    <select>
          <option ng-repeat="date in dates">{{date | date:'MM-dd-yyyy'}}</option>
    </select>
</div>

JS代码

function Ctrl($scope) {
$scope.baseAdd = 0;
$scope.dates = [0,1,2,3,4,5,6].map(function(day) {
dateobj = new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * (day + $scope.baseAdd)));
    while(dateobj.getDay() == 6 || dateobj.getDay() == 0) {
    $scope.baseAdd++
  dateobj = new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * (day + $scope.baseAdd)));
}
return dateobj;
});
console.log($scope.dates)
}

Answer 1

您可以使用 ng-model 和 value 获取选择框的值，如下所示：

<select ng-model="date">
    <option value="1-1">1-1</option>
    <option value="1-2">1-2</option>
</select>

对于您的情况，这也适用：

<select ng-model="date">
    <option ng-repeat="date in dates">{{date | date:'MM-dd-yyyy'}}</option>
</select>

Jsfiddle：https://jsfiddle.net/ealonwang/na0bs2ox/

Answer 2

您应该在 <select> 标签上添加 ng-model="someVar" 作为属性。

然后您可以在控制器中使用它作为 $scope.someVar。

Answer 3

您可能想使用 ngOptions，因为它恰好为您实现了这一点。这是您的 fiddle 以及使用 ngModel 和 ngOptions

的示例

http://jsfiddle.net/x67udrcg/

每当下拉列表发生变化时，$scope.selectedDate 将保留新值

<div ng-app ng-controller="Ctrl">
  <select ng-options="date as date | date:'MM-dd-yyyy' for date in dates" ng-model="selectedDate"></select>
</div>

将 ng-model 分配给 ng-repeat（用于下拉选择）

assign ng-model to ng-repeat (for dropdown selection)

javascript

jquery

angularjs

date

dropdown