blocks|key|43573|text|您可以像这样简单地使用ng-init|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|43574|<select+ng-init="somethingHere+=+options[0]"+
++++++++ng-model="somethingHere"+
++++++++ng-options="option.name+for+option+in+options">
</select>|code-block|syntax|javascript|43575|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.directive:ngInit^0|B|7|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can simply use <a href="http://docs.angularjs.org/api/ng.directive:ngInit">ng-init</a> like this</p>

<pre><code>&lt;select ng-init="somethingHere = options[0]" 
        ng-model="somethingHere" 
        ng-options="option.name for option in options"&gt;
&lt;/select&gt;
</code></pre>


blocks|key|260390|text|如果您希望确保视图初始化时不会覆盖Init值，则需要将ng-+$scope.somethingHere中的值合并(somethingHere+=+somethingHere+%7C%7C+options[0].value)，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|260391|<select+ng-model="somethingHere"+
++++++++ng-init="somethingHere+=+somethingHere+%7C%7C+options[0].value"
++++++++ng-options="option.value+as+option.name+for+option+in+options">
</select>|code-block|syntax|javascript|260392|entityMap^0|V|K|1L|1D|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>If you want to make sure your <code>$scope.somethingHere</code> value doesn't get overwritten when your view initializes, you'll want to coalesce (<code>somethingHere = somethingHere || options[0].value</code>) the value in your ng-init like so:</p>

<pre><code>&lt;select ng-model="somethingHere" 
        ng-init="somethingHere = somethingHere || options[0].value"
        ng-options="option.value as option.name for option in options"&gt;
&lt;/select&gt;
</code></pre>


blocks|key|260423|text|我的解决方案是使用html来硬编码我的默认选项。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260424|在HAML中：|260425|%25select{'ng-model'+=>+'province',+'ng-options'+=>+"province+as+province+for+province+in+summary.provinces",+'chosen'+=>+"chosen-select",+'data-placeholder'+=>+"BC+&+ON"}
++%25option{:value+=>+"",+:selected+=>+"selected"}
++++BC+&amp;+ON|code-block|syntax|javascript|260426|在HTML中：|260427|<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>|260428|我想要我的默认选项从我的api返回所有值，这就是为什么我有一个空值。也请原谅我的火腿。我知道这不能直接回答OP的问题，但是人们可以在Google上找到这个。希望这对其他人有帮助。|260429|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>My solution to this was use html to hardcode my default option. Like so:</p>

<p>In HAML:</p>

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

<p>In HTML:</p>

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

<p>I want my default option to return all values from my api, that's why I have a blank value. Also excuse my haml. I know this isn't directly an answer to the OP's question, but people find this on Google. Hope this helps someone else.</p>


blocks|key|260457|text|我认为，在包含'track‘之后，您可以在ng-options中使用它来获得您想要的内容，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260458|+<select+ng-model="somethingHere"+ng-options="option.name+for+option+in+options+track+by+option.value"+></select>|code-block|syntax|javascript|260459|这样做更好，因为当您想用对象列表替换字符串列表时，只需将其更改为|260460|+<select+ng-model="somethingHere"+ng-options="object.name+for+option+in+options+track+by+object.id"+></select>|260461|其中，somethingHere是一个具有属性名称和id的对象。请注意，'as‘不是以这种方式表示ng-options的，因为它只设置值，当您使用track+by时，您将无法更改它|260462|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I think, after the inclusion of 'track by', you can use it in ng-options to get what you wanted, like the following</p>

<pre><code> &lt;select ng-model="somethingHere" ng-options="option.name for option in options track by option.value" &gt;&lt;/select&gt;
</code></pre>

<p>This way of doing it is better because when you want to replace the list of strings with list of objects you will just change this to </p>

<pre><code> &lt;select ng-model="somethingHere" ng-options="object.name for option in options track by object.id" &gt;&lt;/select&gt;
</code></pre>

<p>where somethingHere is an object with the properties name and id, of course. Please note, 'as' is not used in this way of expressing the ng-options, because it will only set the value and you will not be able to change it when you are using track by</p>


blocks|key|43760|text|根据您有多少个选项，您可以将值放入一个数组中，然后像这样自动填充您的选项|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43761|<select+ng-model="somethingHere.values"+ng-options="values+for+values+in+[5,4,3,2,1]">
+++<option+value="">Pick+a+Number</option>
</select>|code-block|syntax|javascript|43762|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Depending on how many options you have, you could put your values in an array and auto-populate your options like this</p>

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


blocks|key|260518|text|我认为最简单的方法是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260519|+ng-selected="$first"|code-block|syntax|javascript|260520|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I think the easiest way is</p>

<pre><code> ng-selected="$first"
</code></pre>


blocks|key|260563|text|在我的例子中，因为表单中的默认值因案例而异。我在select标记中添加了一个自定义属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260564|+<select+setSeletected="{{data.value}}">
++++++<option+value="value1">+value1....
++++++<option+value="value2">+value2....
+++++++......|code-block|syntax|javascript|260565|在指令中，我创建了一个检查该值的脚本，当angular填充该值时，将该值设置为selected。|260566|+.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="'%2Battrs.setSelected%2B'"]').prop('selected',true);++++++++++
+++++++}
+++++}
++++}

++setSel()|260567|})|260568|只是在飞行中从咖啡脚本翻译过来的，至少它的要领是正确的，如果不是洞的事情。|260569|这不是最简单的方法，但可以在值变化时完成|260570|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>In my case since the default varies from case to case in the form.
I add a custom attribute in the select tag.</p>

<pre><code> &lt;select setSeletected="{{data.value}}"&gt;
      &lt;option value="value1"&gt; value1....
      &lt;option value="value2"&gt; value2....
       ......
</code></pre>

<p>in the directives I created a script that checks the value and when angular fills it in sets the option with that value to selected.</p>

<pre><code> .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()
</code></pre>

<p>}) </p>

<p>just translated this from coffescript on the fly at least the jist of it is correct if not the hole thing.</p>

<p>It's not the simplest way but get it done when the value varies</p>


blocks|key|260593|text|使用以下代码填充从模型中选择的选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260594|<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>|code-block|syntax|javascript|260595|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Use below code to populate selected option from your model.</p>

<pre><code>&lt;select id="roomForListing" ng-model="selectedRoom.roomName" &gt;

&lt;option ng-repeat="room in roomList" title="{{room.roomName}}" ng-selected="{{room.roomName == selectedRoom.roomName}}" value="{{room.roomName}}"&gt;{{room.roomName}}&lt;/option&gt;

&lt;/select&gt;
</code></pre>


blocks|key|260648|text|如果您使用ng-options渲染，则下拉菜单中默认选择的是具有与ng-mode值相同的option。考虑下面的例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|260649|<select+ng-options="list.key+as+list.name+for+list+in+lists+track+by+list.id"+ng-model="selectedItem">|code-block|syntax|javascript|260650|因此，默认选择具有相同值list.key和selectedItem的选项。|260651|entityMap^0|5|A|18|6|0|0|C|8|L|C|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|N|$]]

<p>If you are using <code>ng-options</code> to render you drop down than <code>option</code> having same value as of ng-modal is default selected.
Consider the example:</p>

<pre><code>&lt;select ng-options="list.key as list.name for list in lists track by list.id" ng-model="selectedItem"&gt;
</code></pre>

<p>So option having same value of  <code>list.key</code> and <code>selectedItem</code>, is default selected.</p>


blocks|key|43946|text|我会在控制器中设置模型。那么select将默认为该值。例如:+html：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|43947|<select+ng-options="..."+ng-model="selectedItem">|code-block|syntax|javascript|43948|角度控制器(使用资源)：|43949|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
++}
});|43950|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I would set the model in the controller. Then the select will default to that value. Ex: 
html:</p>

<pre><code>&lt;select ng-options="..." ng-model="selectedItem"&gt;
</code></pre>

<p>Angular controller (using resource):</p>

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


blocks|key|260733|text|在我的例子中，我只需要插入一个初始值来告诉用户选择一个选项，所以，我喜欢下面的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260734|<select+...
++++<option+value=""+ng-selected="selected">Select+one+option</option>
</select>|code-block|syntax|javascript|260735|当我尝试一个值为!=的空字符串(+null+)的选项时，该选项被替换为angular，但是，当放置一个这样的选项(值为null)时，select将与该选项一起出现。|260736|抱歉，我的英语不好，我希望我能在这方面有所帮助。|260737|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In my case, I was need to insert a initial value only to tell to user to select an option, so, I do like the code below:</p>

<pre><code>&lt;select ...
    &lt;option value="" ng-selected="selected"&gt;Select one option&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>When I tryed an option with the value != of an empty string (null) the option was substituted by angular, but, when put an option like that (with null value), the select apear with this option.</p>

<p>Sorry by my bad english and I hope that I help in something with this.</p>


blocks|key|44078|text|作为对Ben+Lesh's+answer的响应，应该有下面这行|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|44079|ng-init="somethingHere+=+somethingHere+%7C%7C+options[0]"+|code-block|syntax|javascript|44080|而不是|44081|ng-init="somethingHere+=+somethingHere+%7C%7C+options[0].value"+|44082|那是,|44083|​|44084|<select+ng-model="somethingHere"
++++++++ng-init="somethingHere+=+somethingHere+%7C%7C+options[0]"
++++++++ng-options="option.name+for+option+in+options+track+by+option.value">
</select>|44085|44086|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/18195717/3982001^0|3|H|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|17|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|C|$]]|$1|Q|3|R|5|F|7|1A|8|@]|9|@]|C|$G|H]]|$1|S|3|P|5|6|7|1B|8|@]|9|@]|C|$]]|$1|T|3|-4|5|6|7|1C|8|@]|9|@]|C|$]]]|U|$V|$5|W|X|Y|C|$Z|10]]]]

<p>In response to <a href="https://stackoverflow.com/a/18195717/3982001">Ben Lesh's answer</a>, there should be this line</p>

<pre><code>ng-init="somethingHere = somethingHere || options[0]" 
</code></pre>

<p>instead of</p>

<pre><code>ng-init="somethingHere = somethingHere || options[0].value" 
</code></pre>

<p>That is,</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select ng-model="somethingHere"
        ng-init="somethingHere = somethingHere || options[0]"
        ng-options="option.name for option in options track by option.value"&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>


blocks|key|260811|text|只需按如下方式使用ng-selected="true"：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|260812|<select+ng-model="myModel">
++++++++<option+value="a"+ng-selected="true">A</option>
++++++++<option+value="b">B</option>
</select>|code-block|syntax|javascript|260813|entityMap^0|9|I|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Simply use <code>ng-selected="true"</code> as follows:</p>

<pre><code>&lt;select ng-model="myModel"&gt;
        &lt;option value="a" ng-selected="true"&gt;A&lt;/option&gt;
        &lt;option value="b"&gt;B&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|260839|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260840|<select+ng-model="somethingHere"+ng-init="somethingHere='Cool'">
++++<option+value="Cool">Something+Cool</option>
++++<option+value="Else">Something+Else</option>
</select>|code-block|syntax|javascript|260841|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This worked for me.</p>

<pre><code>&lt;select ng-model="somethingHere" ng-init="somethingHere='Cool'"&gt;
    &lt;option value="Cool"&gt;Something Cool&lt;/option&gt;
    &lt;option value="Else"&gt;Something Else&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|260889|text|这对我很有效|type|unstyled|depth|inlineStyleRanges|entityRanges|data|260890|ng-selected="true"+|code-block|syntax|javascript|260891|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This working for me</p>

<pre><code>ng-selected="true" 
</code></pre>


blocks|key|44191|text|我需要默认的“请选择”是不可选择的。我还需要能够有条件地设置默认的选定选项。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44192|我通过以下简单的方式实现了这一点:+JS+code:+//翻转这2个来测试选定的默认值或没有默认值，默认“请选择”文本//$value.scope.defaultOption=+0；$scope.defaultOption+={+key：'+3‘，value：'Option+3’}；|44193|$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;+}
}|code-block|syntax|javascript|44194|HTML：|44195|<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>+++++++++|44196|我希望这对其他有类似需求的人有所帮助。|44197|“请选择”是通过Joffrey+Outtier的answer+here完成的。|offset|length|44198|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/20247608/how-do-i-add-an-unselectable-and-customizable-placeholder-to-a-select-box^0|0|0|0|0|0|0|V|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@$Q|17|R|18|1|19]]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>I needed the default “Please Select” to be unselectable.  I also needed to be able to conditionally set a default selected option. </p>

<p>I achieved this the following simplistic way:
JS code:
    // Flip these 2 to test selected default or no default with default “Please Select” text
    //$scope.defaultOption = 0;
    $scope.defaultOption = { key: '3', value: 'Option 3' };</p>

<pre><code>$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; }
}
</code></pre>

<p>HTML:</p>

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

<p>I hope this helps someone else that has similar requirements.</p>

<p>The "Please Select" was accomplished through Joffrey Outtier's answer <a href="https://stackoverflow.com/questions/20247608/how-do-i-add-an-unselectable-and-customizable-placeholder-to-a-select-box">here</a>. </p>


blocks|key|260945|text|如果你有一些东西，而不仅仅是初始化日期部分，你可以通过在控制器中声明它来使用ng-init()，并在你的HTML顶部使用它。这个函数就像你的控制器的构造器，你可以在那里初始化你的变量。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|260946|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>|code-block|syntax|javascript|260947|entityMap^0|12|9|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>If you have some thing instead of just init the date part, you can use <code>ng-init()</code> by declare it in your controller, and use it in the top of your HTML.
This function will work like a constructor for your controller, and you can initiate your variables there.</p>

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


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


blocks|key|260951|text|++++
++++<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>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|260952|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|44271|text|在你的角度控制器中试试这个。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|44272|$somethingHere+=+{name：'Something+Cool'}；|44273|您可以设置一个值，但您使用的是复杂类型，并且角度将搜索要在视图中设置的键/值。|44274|如果不起作用，试试这个:+ng-+options+="option.value+as+option.name+for+option+in+options+track+by+option.name“|44275|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|L|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|M|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>try this in your angular controller...</p>

<p>$somethingHere = {name: 'Something Cool'};</p>

<p>You can set a value, but you are using a complex type and the angular will search key/value to set in your view.</p>

<p>And, if does not work, try this :
ng-options="option.value as option.name for option in options track by option.name"</p>


<p>I have searched Google and can't find anything on this.</p>

<p>I have this code.</p>

<pre><code>&lt;select ng-model="somethingHere" 
        ng-options="option.value as option.name for option in options"
&gt;&lt;/select&gt;
</code></pre>

<p>With some data like this </p>

<pre><code>options = [{
   name: 'Something Cool',
   value: 'something-cool-value'
}, {
   name: 'Something Else',
   value: 'something-else-value'
}];
</code></pre>

<p>And the output is something like this.</p>

<pre><code>&lt;select ng-model="somethingHere"  
        ng-options="option.value as option.name for option in options" 
        class="ng-pristine ng-valid"&gt;

    &lt;option value="?" selected="selected"&gt;&lt;/option&gt;
    &lt;option value="0"&gt;Something Cool&lt;/option&gt;
    &lt;option value="1"&gt;Something Else&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>How is it possible to set the first option in the data as the default value so you would get a result like this.</p>

<pre><code>&lt;select ng-model="somethingHere" ....&gt;
    &lt;option value="0" selected="selected"&gt;Something Cool&lt;/option&gt;
    &lt;option value="1"&gt;Something Else&lt;/option&gt;
&lt;/select&gt;
</code></pre>


How to have a default option in Angular.js select box

我已经在谷歌上搜索过了，在这上面找不到任何东西。我有这个代码。<select ng-model="somethingHere"         ng-options="option.value as option.name for option in options"></select>使用下面的一些数据options...

问如何在Angular.js选择框中设置默认选项
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular.js选择框中设置默认选项EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular.js选择框中设置默认选项
EN