如何在下拉列表中預先選擇所選項目？ [Angular]

我目前有一個角度返回狀態列表的服務。該陣列是這樣的：如何在下拉列表中預先選擇所選項目？ [Angular]

model.Address.StateList = [ 
    { Disabled: false, 
     Group: null, 
     Selected: false, 
     Text: "CA", 
     Value: "1" 
     }, 
{ Disabled: false, 
     Group: null, 
     Selected: false, 
     Text: "IL", 
     Value: "2" 
     }, 
     { Disabled: false, 
     Group: null, 
     Selected: false, 
     Text: "NJ", 
     Value: "3" 
     } 
]

我也是從服務返回的狀態，他們居然選擇，看起來像這樣：

model.Address.State = "CA"

我已經走遍計算器試圖找到一種方法，使這項工作但我不知道如何預先選擇列表中的值。

我已經試過這樣：

<select id="State" ng-model="model.Address.State" ng-change="changeState(model.Address.State)" ng-options="option as option.Text for option in model.Address.StateList track by option.Value"></select>

但是，這並不預先選擇的第一個項目。

的一個辦法，我已經得到它的工作是不斷變化的NG-模式「將selectedItem」，並在控制器中我寫道：

$scope.selectedItem = responseModel.Address.StateList[0];

但是，只挑選的第一個項目。

看來問題是我有一個國家的集合，但我想要的模型只是單數的文本。理想情況下，我希望將所選內容添加到模型對象中，因此當我保存時，我可以將「模型」傳遞給我的api並提供所需的所有值。

來源

2015-11-19 mortey

您使用表單嗎？ – drscaon

還沒有在這個時候，沒有 – mortey

你見過這些答案嗎？ http://stackoverflow.com/questions/17968760/how-to-set-a-selected-option-of-a-dropdown-list-control-using-angular-js – Seano666

請參閱this JSFiddle以獲得可能的解決方案。

我正在使用範圍變量selectedState並在ng-model屬性中使用它，但如果您願意，可以用model.Address.State替換它。

既然你綁定model.Address.State與ngModel指令和使用track by option.Value，你可以的model.Address.State值設置爲要設置活動的選項的值：

model.Address.State = "1";

如果你想改爲使用"CA"，您可以將ng-model更改爲當前範圍的屬性：

<select ng-model="model.Address.State" ng-options="option.Text as option.Text for ... track by Text" ...> 

$scope.selectedState = "CA";

來源

2015-11-19 16:29:54

這似乎不適用於我。我已經嘗試過你和@foxdonut，但沒有運氣。我似乎無法獲得model.Address.State，即「CA」，成爲選定的值。而當我看到狀態選擇的變化，價值成爲對象 – mortey

我創建了一個jsfiddle，演示你想要的行爲：http://jsfiddle.net/pw7a6tyb/1/ –

您希望用於ng-model的值應與您在ng-options中使用的值相匹配。例如：

model.Address.State = "CA"; // matches the Text property 
<select id="State" ng-model="model.Address.State" ng-options="option.Text for option in model.Address.StateList"></select>

相反，如果你想使用Value，你需要匹配起來：

model.Address.State = "1"; // matches the Value property 
<select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Value for option in model.Address.StateList"></select>

希望有所幫助。

來源

2015-11-19 16:31:02 foxdonut

這似乎並沒有工作對我來說。我有這個但加載時的model.Address.State是「CA」，但沒有選擇任何內容。在那個ng-change函數中，我看到model.Address.State等於State List中的整個模型。意思是，如果我選擇IL，那麼model.Address.State等於StateList [1]完全 – mortey

只需要'option.Text作爲option.Text'在我的第一個答案，這正是工作...我不會說這不是根本沒有幫助= P – foxdonut

我說「它根本就不適合我」，我很抱歉。感謝您的洞察 – mortey

我想通了！

感謝有見識的指導HERE我能夠更多地瞭解ng-options和Select in angular。

最終導致問題的是我需要指定顯示在下拉列表中的文本與模型中的文本相匹配。使其工作的最終代碼是：

<select id="State" ng-model="model.Address.State" ng-options="option.Text as option.Text for option in model.Address.StateList"></select>

來源

2015-11-19 19:08:28 mortey

優雅的解決方案！ –

這與我的第一個答案是一樣的，只需要'option.Text作爲option.Text'就近了！ :) – foxdonut

如何在下拉列表中預先選擇所選項目？ [Angular]

回答

相關問題