角度默認選擇選項

我有一個問題讓我的選擇正確設置我的數據的默認選項。我通過Ajax調用從服務器獲取數據。然後我希望能夠使用表單編輯這些數據。我想指出選擇使用在控制器對象中設置的選項，但是當您編輯select時，我希望模型指向ajax數據，因爲這是我寫回服務器的內容。正如你可以在我的plunkr中看到的那樣，這四個項目中的每一個都應該有他們的選擇選項，但是所有的選項都是空的。角度默認選擇選項

在對角的官方文檔，他們說做如下設置默認：

angular.module('defaultValueSelect', []) 
    .controller('ExampleController', ['$scope', function($scope) { 
    $scope.data = { 
    availableOptions: [ 
    {id: '1', name: 'Option A'}, 
    {id: '2', name: 'Option B'}, 
    {id: '3', name: 'Option C'} 
    ], 
    selectedOption: {id: '3', name: 'Option C'} //This sets the default value of the select in the ui 
    }; 
}]); 

//Then in the HTML file: 
<select name="mySelect" id="mySelect" 
    ng-options="option.name for option in data.availableOptions track by option.id" 
    ng-model="data.selectedOption"></select>

在我的情況下，選擇不在AJAX數據然而，只有當前選定的選項。所以我想通過一個控制器對象來管理可用選項，但將select與ajax數據綁定。謝謝。

https://plnkr.co/edit/Q16QLT?p=preview

來源

2016-06-07 Nathan Kamenar

您應該定義，其中「選項」屬性，你要綁定到：

<select ng-options="option.value as option.text for option in options" ng-model="item.select"></select>

工作演示https://plnkr.co/edit/BezGaYjykfQrFQ9nZop2?p=preview

來源

2016-06-07 16:01:50

完整選項對象，因此這主要是完成我想要的一個問題。似乎這樣做會將每個選項的值屬性更改爲「string：{value}」，而不是「{value}」。檢查這個更新的plunker上的選擇選項，看看我的意思。任何想法如何防止這一點，但保持其他功能？ https://plnkr.co/edit/66I229?p=preview –

爲什麼這會打擾你？當選定項目更改模型更新爲正確值時。查看更新的plunker https://plnkr.co/edit/BezGaYjykfQrFQ9nZop2?p=preview –

更改您的選擇是：

<select ng-options="option.text as option.text for option in options" ng-model="item.select"></select>

來源

2016-06-07 16:17:17

這將肯定工作：

由於您的NG-模型包含你需要在NG選項的對象綁定它，以及

<select name="mySelect" id="mySelect" 
    ng-options="option as option.name for option in data.availableOptions track by option.id" 
    ng-model="data.selectedOption"></select>

來源

2016-06-07 17:17:21

角度默認選擇選項

回答

相關問題