將ng-model指定爲ng-repeat（用於下拉選擇）

這是參考此處附帶的jsfiddle。 http://jsfiddle.net/n1cf938h/將ng-model指定爲ng-repeat（用於下拉選擇）

如小提琴中所示，ng-repeat生成日期列表。我想知道用戶選擇了哪個下拉選擇。我如何在這種情況下使用ng模型？

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

來源

2016-01-20 Ayesha

您可能想要使用ngOptions，因爲它可以爲您實現此功能。下面是一個例子你的小提琴使用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>

來源

2016-01-20 23:53:48

感謝您向我展示如何爲我的案例使用ng-options。它運作良好。 – Ayesha

可以使用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/

來源

2016-01-20 23:46:22 NMSL

@ Ealon-如你所說，我不能賦值。因爲我使用ng-repeat來顯示所有的下拉列表而不是個別的選項標籤 – Ayesha

@Ayesha等一下，我正在爲你寫一個Jsfiddle。 – NMSL

@Ayesha選中此：https://jsfiddle.net/ealonwang/na0bs2ox/ – NMSL

您應該添加ng-model="someVar"作爲對<select>標籤的屬性。

然後，您可以在控制器內使用它作爲$scope.someVar。

來源

2016-01-20 23:48:03 koster1889

@ koster1889-我可以得到$ scope.someVar的結果嗎？目前沒有賦予選項標籤的值。由於ng-repeat，給下拉分配不同的值似乎不可能在這裏 – Ayesha

我得到了類似這樣的工作......查看ng-options而不是ng-repeat可能會很好。這是一個專門針對這種情況的指令。 – koster1889

將ng-model指定爲ng-repeat（用於下拉選擇）

回答

相關問題