如何在Angular.js选择框中有一个默认选项

时间：2013-08-12 18:38:55

标签： javascript angularjs html-select

我搜索了Google，但在此找不到任何内容。

我有这段代码。

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

有一些这样的数据

options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];

输出就是这样的。

<select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid">

    <option value="?" selected="selected"></option>
    <option value="0">Something Cool</option>
    <option value="1">Something Else</option>
</select>

如何将数据中的第一个选项设置为默认值，以便得到这样的结果。

<select ng-model="somethingHere" ....>
    <option value="0" selected="selected">Something Cool</option>
    <option value="1">Something Else</option>
</select>

24 个答案:

答案 0 :(得分：352)

您可以像这样使用ng-init 

<select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options">
</select>

答案 1 :(得分：228)

如果你想确保在你的视图初始化时你的$scope.somethingHere值没有被覆盖，你需要合并（somethingHere = somethingHere || options[0].value）你的ng-init中的值，如下所示：< / p> 

<select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options">
</select>

答案 2 :(得分：69)

试试这个：

<强> HTML 

<select 
    ng-model="selectedOption" 
    ng-options="option.name for option in options">
</select>

<强>的Javascript 

function Ctrl($scope) {
    $scope.options = [
        {
          name: 'Something Cool',
          value: 'something-cool-value'
        }, 
        {
          name: 'Something Else',
          value: 'something-else-value'
        }
    ];

    $scope.selectedOption = $scope.options[0];
}

Plunker here。

如果您确实要设置将绑定到模型的值，请将ng-options属性更改为

ng-options="option.value as option.name for option in options"

和Javascript to 

...
$scope.selectedOption = $scope.options[0].value;

考虑到上述内容的另一个Plunker here。

答案 3 :(得分：38)

只有一个answer by Srivathsa Harish Venkataramana提到了track by这确实是一个解决方案！

以下是关于如何在选择 track by中使用ng-options的Plunker（下方链接）的示例：

<select ng-model="selectedCity"
        ng-options="city as city.name for city in cities track by city.id">
  <option value="">-- Select City --</option>
</select>

如果在角度范围内定义了selectedCity，并且id属性的id属性与city列表中任意cities的任何{{1}}相同，它将在加载时自动选择。

  

以下是Plunker：   http://plnkr.co/edit/1EVs7R20pCffewrG0EmI?p=preview

有关详细信息，请参阅源文档： https://code.angularjs.org/1.3.15/docs/api/ng/directive/select

答案 4 :(得分：33)

我认为，在加入'track by'后，您可以在ng-options中使用它来获得您想要的内容，如下所示

 <select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" ></select>

这种做法更好，因为当您想要用对象列表替换字符串列表时，您只需将其更改为

 <select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" ></select>

其中somethingHere是一个具有属性名称和id的对象，当然。请注意，'as'不是以这种方式表达ng-options，因为它只会设置值，当你使用track时你将无法改变它

答案 5 :(得分：22)

接受的答案使用ng-init，但document表示如果可能，请避免使用ng-init。

  

ngInit的唯一合适用途是对特殊属性进行别名处理   ngRepeat的内容，如下面的演示所示。除了这种情况，你应该   使用控制器而不是ngInit来初始化作用域上的值。

您也可以使用ng-repeat代替ng-options作为选项。使用ng-repeat，您可以将ng-selected与ng-repeat特殊属性结合使用。即$ index，$ odd，$甚至无需任何编码即可完成这项工作。

$first是ng-repeat特殊属性之一。

  <select ng-model="foo">
    <option ng-selected="$first" ng-repeat="(id,value) in myOptions" value="{{id}}">
      {{value}}
    </option>
  </select>

----------------------编辑----------------
虽然这很有效，但是当你知道选择什么值{@ 3}}时，我会更喜欢@ mik-t的答案，https://stackoverflow.com/a/29564802/454252使用track-by和ng-options而不使用ng-init或ng-repeat。

只有在必须选择第一项而不知道选择什么值时才应使用此答案。例如，我使用它进行自动完成，这需要一直选择第一项。

答案 6 :(得分：16)

我的解决方法是使用html来硬编码我的默认选项。像这样：

在HAML中：

%select{'ng-model' => 'province', 'ng-options' => "province as province for province in summary.provinces", 'chosen' => "chosen-select", 'data-placeholder' => "BC & ON"}
  %option{:value => "", :selected => "selected"}
    BC &amp; ON

在HTML中：

<select ng-model="province" ng-options="province as province for province in summary.provinces" chosen="chosen-select" data-placeholder="BC & ON">
  <option value="" selected="selected">BC &amp; ON</option>
</select>

我希望我的默认选项从我的api返回所有值，这就是为什么我有一个空值。也请原谅我的haml。我知道这不是OP问题的直接答案，但人们在Google上发现了这一点。希望这有助于其他人。

答案 7 :(得分：14)

使用以下代码填充模型中的选定选项。

<select id="roomForListing" ng-model="selectedRoom.roomName" >

<option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}">{{room.roomName}}</option>

</select>

答案 8 :(得分：10)

根据您拥有的选项数量，您可以将值放在数组中并自动填充您的选项

<select ng-model="somethingHere.values" ng-options="values for values in [5,4,3,2,1]">
   <option value="">Pick a Number</option>
</select>

答案 9 :(得分：10)

在我的情况下，我需要插入一个初始值，只是告诉用户选择一个选项，所以，我喜欢下面的代码：

<select ...
    <option value="" ng-selected="selected">Select one option</option>
</select>

当我尝试使用值为！=空字符串（null）的选项时，该选项被angular替换，但是，当放置一个类似的选项（使用null值）时，选择apear使用此选项。

对不起我的英语不好，我希望我能帮助解决这个问题。

答案 10 :(得分：8)

将select与ngOptions一起使用并设置默认值：

有关更多ngOptions使用示例，请参阅ngOptions文档。

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: '2', name: 'Option B'} //This sets the default value of the select in the ui
    };
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="mySelect">Make a choice:</label>
    <select name="mySelect" id="mySelect"
      ng-options="option.name for option in data.availableOptions track by option.id"
      ng-model="data.selectedOption"></select>
  </form>
  <hr>
  <tt>option = {{data.selectedOption}}</tt><br/>
</div>

的 plnkr.co

Official documentation 关于带有角度数据绑定的HTML SELECT元素。

通过select解析/格式化将ngModel绑定到非字符串值：

(function(angular) {
  'use strict';
angular.module('nonStringSelect', [])
  .run(function($rootScope) {
    $rootScope.model = { id: 2 };
  })
  .directive('convertToNumber', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        ngModel.$parsers.push(function(val) {
          return parseInt(val, 10);
        });
        ngModel.$formatters.push(function(val) {
          return '' + val;
        });
      }
    };
  });
})(window.angular);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.1/angular.min.js"></script>
<body ng-app="nonStringSelect">
  <select ng-model="model.id" convert-to-number>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>
{{ model }}
</body>

的 plnkr.co

其他例子：

angular.module('defaultValueSelect', [])
 .controller('ExampleController', ['$scope', function($scope) {
   $scope.availableOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }, 
     { name: 'Kiwi', value: 'kiwi' }
   ];
   $scope.data = {selectedOption : $scope.availableOptions[1].value};
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<body ng-app="defaultValueSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <select ng-model="data.selectedOption" required ng-options="option.value as option.name for option in availableOptions"></select>
  </form>  
  </div>
</body>

的 jsfiddle

答案 11 :(得分：4)

这对我有用。

<select ng-model="somethingHere" ng-init="somethingHere='Cool'">
    <option value="Cool">Something Cool</option>
    <option value="Else">Something Else</option>
</select>

答案 12 :(得分：3)

在我的情况下，因为默认情况因表格中的不同情况而异。 我在select标记中添加了一个自定义属性。

 <select setSeletected="{{data.value}}">
      <option value="value1"> value1....
      <option value="value2"> value2....
       ......

在指令中我创建了一个检查值的脚本，当角度填充它时，将选择该值设置为选中。

 .directive('setSelected', function(){
    restrict: 'A',
    link: (scope, element, attrs){
     function setSel=(){
     //test if the value is defined if not try again if so run the command
       if (typeof attrs.setSelected=='undefined'){             
         window.setTimeout( function(){setSel()},300) 
       }else{
         element.find('[value="'+attrs.setSelected+'"]').prop('selected',true);          
       }
     }
    }

  setSel()

}）

刚刚从coffescript中翻译了这个，至少它的主旨是正确的，如果不是洞的话。

这不是最简单的方法，但是当价值变化时完成它

答案 13 :(得分：3)

只需使用ng-selected="true"，如下所示：

<select ng-model="myModel">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
</select>

答案 14 :(得分：3)

在回复Ben Lesh's answer时，应该有这一行

ng-init="somethingHere = somethingHere || options[0]"

而不是

ng-init="somethingHere = somethingHere || options[0].value"

即，

<select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value">
</select>

答案 15 :(得分：2)

我会在控制器中设置模型。然后select将默认为该值。例如： HTML：

<select ng-options="..." ng-model="selectedItem">

角度控制器（使用资源）：

myResource.items(function(items){
  $scope.items=items;
  if(items.length>0){
     $scope.selectedItem= items[0];
//if you want the first. Could be from config whatever
  }
});

答案 16 :(得分：1)

如果您使用ng-options向下渲染，则默认选择具有与ng-modal相同值的option。 考虑一下这个例子：

<select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem">

默认选择具有list.key和selectedItem相同值的选项。

答案 17 :(得分：1)

这对我有用

ng-selected="true"

答案 18 :(得分：0)

我需要默认的“请选择”才能取消选择。我还需要能够有条件地设置默认选择的选项。

我通过以下简单方式实现了这个目标： JS代码：     //使用默认的“请选择”文本，将这些2翻转为测试所选默认值或无默认值     //$scope.defaultOption = 0;     $ scope.defaultOption = {key：'3'，value：'Option 3'}; 

$scope.options = [
   { key: '1', value: 'Option 1' },
   { key: '2', value: 'Option 2' },
   { key: '3', value: 'Option 3' },
   { key: '4', value: 'Option 4' }
];

getOptions();

function getOptions(){
    if ($scope.defaultOption != 0)
    { $scope.options.selectedOption = $scope.defaultOption; }
}

HTML：

<select name="OptionSelect" id="OptionSelect" ng-model="options.selectedOption" ng-options="item.value for item in options track by item.key">
<option value="" disabled selected style="display: none;"> -- Please Select -- </option>
</select>
<h1>You selected: {{options.selectedOption.key}}</h1>

我希望这有助于其他有相似要求的人。

“请选择”是通过Joffrey Outtier的回答here完成的。

答案 19 :(得分：0)

如果你有一些东西而不是只是初始化日期部分，你可以使用ng-init()在控制器中声明它，并在HTML的顶部使用它。 此函数将像控制器的构造函数一样工作，您可以在那里启动变量。

angular.module('myApp', [])
 .controller('myController', ['$scope', ($scope) => {
   $scope.allOptions = [
     { name: 'Apple', value: 'apple' }, 
     { name: 'Banana', value: 'banana' }
   ];
   $scope.myInit = () => {
      $scope.userSelected = 'apple'
      // Other initiations can goes here..
   }
}]);


<body ng-app="myApp">
  <div ng-controller="myController" ng-init="init()">
    <select ng-model="userSelected" ng-options="option.value as option.name for option in allOptions"></select>
   </div>
</body>

答案 20 :(得分：0)

    <!--
    Using following solution you can set initial 
default value at controller as well as after change option selected value shown as default.
    -->
    <script type="text/javascript">
      function myCtrl($scope)
        {
          //...
            $scope.myModel=Initial Default Value; //set default value as required
          //..
        }
    </script>
    <select ng-model="myModel" 
                ng-init="myModel= myModel"
                ng-options="option.value as option.name for option in options">
        </select>

答案 21 :(得分：0)

在你的角度控制器中试试......

$ somethingHere = {name：'Something Cool'};

您可以设置一个值，但是您使用的是复杂类型，而angular将搜索要在视图中设置的键/值。

而且，如果不起作用，试试这个： ng-options =“option.value as option.name for options in option track by option.name”

答案 22 :(得分：-1)

我认为最简单的方法是

 ng-selected="$first"

答案 23 :(得分：-4)

最简单的方法（更新）

在此处说明 https://stackoverflow.com/a/37962911/5902146

相关问题
最新问题