如何在下拉列表中選擇一個選項angularjs

我正在使用AngularJS指令，我需要在我的模板中設置下拉列表的選定選項。如何在下拉列表中選擇一個選項angularjs

<select id="energySource" ng-options="o.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>

選項列表的內容取決於加載頁面時由服務器發送的資源。

var energyChosen = "All"; 


     angular.element(document).ready(function() { 

      $.get('/Dashboard/GetResources', function (data) { 

       scope.Resources = data; 

       scope.energyOptions = [{ name: scope.Resources.Electricity, id: "Electricity" }, { name: scope.Resources.Gas, id: "Gas" }, 
       { name: scope.Resources.Water, id: "Water" }, { name: scope.Resources.Solar, id: "Solar" }]; 

       scope.energy = scope.energyOptions[0]; 
       energyChosen = scope.energy.id; 

       scope.$apply(); 

      });

它的工作原理，只是一個空白選項是預選會消失，當我選擇一個選項我希望能夠預先選擇一個選項。我以爲

scope.energy = scope.energyOptions[0];

會做的伎倆，但它沒有。我如何在這種情況下預先選擇一個選項？

來源

2013-11-28 user3044142

-1

確保scope.energy在初始化之外。

$scope.energyOptions = [ 
    { name: "test1", id: "Electricity" }, 
    { name: "test2", id: "Gas" }, 
    { name: "test3", id: "Water" }, 
    { name: "test4", id: "Solar" }]; 
    $scope.energy = $scope.energyOptions[2];

來源

2013-11-28 06:09:53 user2720708

你正在做你ng-options它將選項的名稱存儲在scope.energy不是整個選項的方式。你在正確的軌道上，當你這樣做：

scope.energy = scope.energyOptions[0];

但它不會工作，因爲它預計scope.energy是名稱，而不是整個選項。你想在你ng-options做的是一樣的東西：

<select id="energySource" ng-options="o as on.name for o in energyOptions" ng-model="energy" ng-selected="energy" ng-change="energyChange();"></select>

重要的變化是增加了o as o.name的。左邊的'o'是實際選擇並存儲在您的scope.energy中的內容，而as o.name是將在您的下拉菜單中顯示的文本。

來源

2013-11-28 06:44:26 dtabuenc

謝謝你的回答。該模型似乎是最新的，但該更改沒有反映在頁面上。我從來沒有這個問題，我想我有這個問題，因爲我在一個指令。在這種情況下，更改不會反映在模板中。只有下拉列表有問題，其他模型只要我更改就可以正確更新。 – user3044142

如果我使用靜態數據初始化下拉列表，我可以進行預選，但看起來我無法在代碼之後更改可見選定選項。 – user3044142

你可以搭起一個plunkr或jsfiddle來演示你遇到的問題嗎？ – dtabuenc

如何在下拉列表中選擇一個選項angularjs

回答

相關問題