blocks|key|2800545|text|因此，假设该对象在您的作用域中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2800546|<div+ng-controller="MyCtrl">
++<select+ng-model="prop.value"+ng-options="v+for+v+in+prop.values">
++</select>
</div>|code-block|syntax|javascript|2800547|function+MyCtrl($scope)+{
++$scope.prop+=+{
++++"type":+"select",+
++++"name":+"Service",
++++"value":+"Service+3",+
++++"values":+[+"Service+1",+"Service+2",+"Service+3",+"Service+4"]+
++};
}|2800548|工作平台：http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g|offset|length|2800549|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g^0|0|0|0|5|15|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>So assuming that object is in your scope:</p>

<pre><code>&lt;div ng-controller="MyCtrl"&gt;
  &lt;select ng-model="prop.value" ng-options="v for v in prop.values"&gt;
  &lt;/select&gt;
&lt;/div&gt;
</code></pre>

<p>&nbsp;</p>

<pre><code>function MyCtrl($scope) {
  $scope.prop = {
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
  };
}
</code></pre>

<p>Working Plunkr: <a href="http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g" rel="noreferrer">http://plnkr.co/edit/wTRXZYEPrZJRizEltQ2g</a></p>


blocks|key|2800570|text|angular+documentation+for+select*没有明确回答这个问题，但它确实存在。如果您查看script.js，您将看到以下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2800571|function+MyCntrl($scope)+{
++$scope.colors+=+[
++++{name:'black',+shade:'dark'},
++++{name:'white',+shade:'light'},
++++{name:'red',+shade:'dark'},
++++{name:'blue',+shade:'dark'},
++++{name:'yellow',+shade:'light'}
++];
++$scope.color+=+$scope.colors[2];+//+Default+the+color+to+red
}|code-block|syntax|javascript|2800572|这是html：|2800573|<select+ng-model="color"+ng-options="c.name+for+c+in+colors"></select>|2800574|这似乎是在使用ng-options的<select>上默认选定值的一种更明显的方式。此外，如果您有不同的标签/值，它也会起作用。|2800575|*这是来自Angular+1.2.7的|2800576|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.directive:select^0|1K|9|0|W|0|0|0|0|0|7|A|I|8|0|0|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]]|E|$]]|$1|F|3|G|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|17|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|18|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>The <a href="http://docs.angularjs.org/api/ng.directive:select">angular documentation for select</a>* does not answer this question explicitly, but it is there.  If you look at the <code>script.js</code>, you will see this:</p>

<pre><code>function MyCntrl($scope) {
  $scope.colors = [
    {name:'black', shade:'dark'},
    {name:'white', shade:'light'},
    {name:'red', shade:'dark'},
    {name:'blue', shade:'dark'},
    {name:'yellow', shade:'light'}
  ];
  $scope.color = $scope.colors[2]; // Default the color to red
}
</code></pre>

<p>This is the html:</p>

<pre><code>&lt;select ng-model="color" ng-options="c.name for c in colors"&gt;&lt;/select&gt;
</code></pre>

<p>This seems to be a more obvious way of defaulting a selected value on an <code>&lt;select&gt;</code> with <code>ng-options</code>.  Also it will work if you have different label/values.</p>

<p><code>*</code> This is from Angular 1.2.7</p>


blocks|key|2800580|text|<select+name='partyid'+id="partyid"+class='span3'>
<option+value=''>Select+Party</option>
<option+ng-repeat="item+in+partyName"+value="{{item._id}}"+ng-selected="obj.partyname+==+item.partyname">{{item.partyname}}
</option>
</select>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2800581|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;select name='partyid' id="partyid" class='span3'&gt;
&lt;option value=''&gt;Select Party&lt;/option&gt;
&lt;option ng-repeat="item in partyName" value="{{item._id}}" ng-selected="obj.partyname == item.partyname"&gt;{{item.partyname}}
&lt;/option&gt;
&lt;/select&gt;
</code></pre>


blocks|key|182839|text|如果有人在Chrome、IE+10/11、Firefox中遇到页面上偶尔没有填充的默认值--尝试将此属性添加到您的输入/选择字段中，检查HTML中填充的变量，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|182840|<input+data-ng-model="vm.x"+data-ng-if="vm.x+!==+''+&&+vm.x+!==+undefined+&&+vm.x+!==+null"+/>|code-block|syntax|javascript|182841|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>If anyone is running into the default value occasionally being not populated on the page in Chrome, IE 10/11, Firefox -- try adding this attribute to your input/select field checking for the populated variable in the HTML, like so:</p>

<pre><code>&lt;input data-ng-model="vm.x" data-ng-if="vm.x !== '' &amp;&amp; vm.x !== undefined &amp;&amp; vm.x !== null" /&gt;
</code></pre>


blocks|key|187149|text|如果您的对象数组很复杂，如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|187150|$scope.friends+=+[{+name:+John+,+uuid:+1234},+{name:+Joe,+uuid,+5678}];|code-block|syntax|javascript|187151|并且您当前的模型设置为类似以下内容：|187152|$scope.user.friend+=+{name:John,+uuid:+1234};|187153|它有助于在uuid+(或任何唯一字段)上使用模型函数，只要ng-+track+by+=“user.friend”也有uuid：|offset|length|style|CODE|187154|<select+ng-model="user.friend"+
ng-options="friend+as+friend.name+for+friend+in+friends+track+by+friend.uuid">+
</select>|187155|entityMap^0|0|0|0|0|X|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>If your array of objects are complex like:</p>

<pre><code>$scope.friends = [{ name: John , uuid: 1234}, {name: Joe, uuid, 5678}];
</code></pre>

<p>And your current model was set to something like:</p>

<pre><code>$scope.user.friend = {name:John, uuid: 1234};
</code></pre>

<p>It helped to use the <code>track by</code> function on uuid (or any unique field), as long as the ng-model="user.friend" also has a uuid:</p>

<pre><code>&lt;select ng-model="user.friend" 
ng-options="friend as friend.name for friend in friends track by friend.uuid"&gt; 
&lt;/select&gt;
</code></pre>


blocks|key|185221|text|当你从数据库中获取数据，进行修改，然后持久化修改时，这个答案更有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185222|+<select++ng-options="opt.id+as+opt.name+for+opt+in+users"+ng-model="selectedUser"></select>|code-block|syntax|javascript|185223|请查看此处的示例：|185224|http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV|offset|length|185225|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|15|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>This answer is more usefull when you are bringing data from a DB, make modifications and then persist the changes.</p>

<pre><code> &lt;select  ng-options="opt.id as opt.name for opt in users" ng-model="selectedUser"&gt;&lt;/select&gt;
</code></pre>

<p>Check the example here: </p>

<p><a href="http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV">http://plnkr.co/edit/HrT5vUMJOtP9esGngbIV</a></p>


blocks|key|2800705|text|ng-model属性设置所选的选项，还允许您通过管道传输像orderBy:orderModel.value这样的过滤器|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2800706|index.html|offset|length|style|BOLD|CODE|2800707|<select+ng-model="orderModel"+ng-options="option.name+for+option+in+orderOptions"></select>|code-block|syntax|javascript|2800708|controllers.js|2800709|$scope.orderOptions+=+[
++++{"name":"Newest","value":"age"},
++++{"name":"Alphabetical","value":"name"}
];

$scope.orderModel+=+$scope.orderOptions[0];|2800710|entityMap^0|0|0|A|0|A|0|0|0|E|0|E|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@$D|V|E|W|F|G]|$D|X|E|Y|F|H]]|9|@]|A|$]]|$1|I|3|J|5|K|7|Z|8|@]|9|@]|A|$L|M]]|$1|N|3|O|5|6|7|10|8|@$D|11|E|12|F|G]|$D|13|E|14|F|H]]|9|@]|A|$]]|$1|P|3|Q|5|K|7|15|8|@]|9|@]|A|$L|M]]|$1|R|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|S|$]]

<p>The <em>ng-model</em> attribute sets the selected option and also allows you to pipe a filter like <em>orderBy:orderModel.value</em></p>

<p><strong><code>index.html</code></strong></p>

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

<p><strong><code>controllers.js</code></strong></p>

<pre><code>$scope.orderOptions = [
    {"name":"Newest","value":"age"},
    {"name":"Alphabetical","value":"name"}
];

$scope.orderModel = $scope.orderOptions[0];
</code></pre>


blocks|key|187205|text|一种更简单的方法是像这样使用data-ng-init：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|187206|<select+data-ng-init="somethingHere+=+options[0]"+data-ng-model="somethingHere"+data-ng-options="option.name+for+option+in+options"></select>|code-block|syntax|javascript|187207|这里的主要区别是您需要包含data-ng-model|style|CODE|187208|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng.directive:ngInit^0|E|C|0|0|0|D|D|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@$A|10|B|11|K|L]]|9|@]|C|$]]|$1|M|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>An easier way to do it is to  use <a href="http://docs.angularjs.org/api/ng.directive:ngInit" rel="noreferrer">data-ng-init</a> like this:</p>

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

<p>The main difference here is that you would need to include <code>data-ng-model</code></p>


blocks|key|3013120|text|<select+id="itemDescFormId"+name="itemDescFormId"+size="1"+ng-model="prop"+ng-change="update()">
++++<option+value="">English(EN)</option>
++++<option+value="23">Corsican(CO)</option>
++++<option+value="43">French(FR)</option>
++++<option+value="16">German(GR)</option>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3013121|​|unstyled|3013122|只需添加具有空值的选项。看起来不错。|3013123|DEMO+Plnkr|offset|length|3013124|entityMap|0|LINK|mutability|MUTABLE|url|http://plnkr.co/edit/XBpdLMP53RR2Aec46NEJ?p=preview^0|0|0|0|0|A|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|V|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|F|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|F|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<pre><code>&lt;select id="itemDescFormId" name="itemDescFormId" size="1" ng-model="prop" ng-change="update()"&gt;
    &lt;option value=""&gt;English(EN)&lt;/option&gt;
    &lt;option value="23"&gt;Corsican(CO)&lt;/option&gt;
    &lt;option value="43"&gt;French(FR)&lt;/option&gt;
    &lt;option value="16"&gt;German(GR)&lt;/option&gt;
</code></pre>

<p></p>

<p>Just add option with empty value. It will work.</p>

<p><a href="http://plnkr.co/edit/XBpdLMP53RR2Aec46NEJ?p=preview" rel="noreferrer">DEMO Plnkr</a></p>


blocks|key|185252|text|真的很简单，如果你不关心索引你的选项与一些数字id。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185253|185254|声明$scope变量-人员数组|ordered-list-item|185255|185256|$scope.people=+""，"YOU"，“ME”；|185257|在上述作用域的DOM中，创建对象|unordered-list-item|185258|185259|在控制器中，将ng-|185260|设置为“|185261|
”。|185262|$scope.hired+=+"ME";|185263|祝你好运！这真的很简单！|185264|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|13|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|K|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|18|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

<p>Really simple if you do not care about indexing your options with some numeric id.</p>

<ol>
<li><p>Declare your $scope var - people array</p>

<pre><code>$scope.people= ["", "YOU", "ME"];
</code></pre></li>
<li><p>In the DOM of above scope, create object</p>

<pre><code>&lt;select ng-model="hired" ng-options = "who for who in people"&gt;&lt;/select&gt;
</code></pre></li>
<li><p>In your controller, you set your ng-model "hired".</p>

<pre><code>$scope.hired = "ME";
</code></pre></li>
</ol>

<p>Good luck!!!  It's really easy!</p>


blocks|key|185271|text|总而言之，我做了这样的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185272|+<select+class="form-control"+data-ng-model="itemSelect"+ng-change="selectedTemplate(itemSelect)"+autofocus>
++++++++<option+value="undefined"+[selected]="itemSelect.Name+==+undefined"+disabled="disabled">Select+template...</option>
++++++++<option+ng-repeat="itemSelect+in+templateLists"+value="{{itemSelect.ID}}">{{itemSelect.Name}}</option></select>|code-block|syntax|javascript|185273|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>Just to add up, I did something like this.</p>

<pre><code> &lt;select class="form-control" data-ng-model="itemSelect" ng-change="selectedTemplate(itemSelect)" autofocus&gt;
        &lt;option value="undefined" [selected]="itemSelect.Name == undefined" disabled="disabled"&gt;Select template...&lt;/option&gt;
        &lt;option ng-repeat="itemSelect in templateLists" value="{{itemSelect.ID}}"&gt;{{itemSelect.Name}}&lt;/option&gt;&lt;/select&gt;
</code></pre>


<p>I've seen the documentation of the Angular select directive here: <a href="http://docs.angularjs.org/api/ng.directive:select">http://docs.angularjs.org/api/ng.directive:select</a>. 
I can't figure how to set the default value. This is confusing: </p>

<blockquote>
  <p>select as label for value in array</p>
</blockquote>

<p>Here is the object:</p>

<pre><code>{
    "type": "select", 
    "name": "Service",
    "value": "Service 3", 
    "values": [ "Service 1", "Service 2", "Service 3", "Service 4"] 
}
</code></pre>

<p>The html (working): </p>

<pre><code>&lt;select&gt;&lt;option ng-repeat="value in prop.values"&gt;{{value}}&lt;/option&gt;&lt;/select&gt;
</code></pre>

<p>and then I'm trying to add an ng-option attribute inside the select element to set <code>prop.value</code> as the default option (not working).</p>

<pre><code>ng-options="(prop.value) for v in prop.values"
</code></pre>

<p>What am i doing wrong?</p>


how to use ng-option to set default value of select element

数据库

我在这里看到了Angular select指令的文档：。我不知道如何设置默认值。这是令人困惑的： select作为数组中值的标签下面是对象：{    "type": "select",     "name": "Service",    "value": "Service 3",     "values": [ "Se...

问如何使用ng-option设置select元素的默认值
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用ng-option设置select元素的默认值EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用ng-option设置select元素的默认值
EN