Question

我正在使用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];

会做到这一点，但事实并非如此。在这种情况下，我如何预选一个选项？

Answer 1

您执行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是将在下拉列表中显示的文本。

Answer 2

确保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];

如何在下拉列表angularjs中选择一个选项

2 个答案: