AngularJs和< select&gt ;:删除默认的选定选项 [英] AngularJs and <select>: Default selected options are removed

问题描述

我希望以下代码在默认情况下选择第三个选项的情况下呈现一个下拉列表.但是，当我将选择与angularjs绑定在一起时，默认选择消失了.有什么想法吗?

var myApp = angular.module('myApp', []);

...

<div>
  <select id="myselection" ng-model="selectedColors">
    <option value="1" >Red</option>
     <option value="2">Blue</option>
     <option value="3" selected="selected">Green</option>
  </select>

  <div>
    Selected Colors: {{selectedColors }}
  </div>
</div>

这是一个有效的示例: http://jsfiddle.net/TXPJZ/134/

谢谢！

解决方案

解决方案最简单的方法是使用ng-init.

<div>
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
    <div>Selected Colors: {{selectedColors }}</div>
</div>

在 FIDDLE 上尝试.

I expect the following code to render a drop down list with the third option selected by default. However, when I bind the select with angularjs, the default selection disappears. Any thought?

var myApp = angular.module('myApp', []);

...

<div>
  <select id="myselection" ng-model="selectedColors">
    <option value="1" >Red</option>
     <option value="2">Blue</option>
     <option value="3" selected="selected">Green</option>
  </select>

  <div>
    Selected Colors: {{selectedColors }}
  </div>
</div>

Here's a working example: http://jsfiddle.net/TXPJZ/134/

Thanks!

解决方案

The easiest way to fix your implementation is to use ng-init.

<div>
    <select id="myselection" ng-init="selectedColors=3" ng-model="selectedColors">
        <option value="1">Red</option>
        <option value="2">Blue</option>
        <option value="3">Green</option>
    </select>
    <div>Selected Colors: {{selectedColors }}</div>
</div>

Try it on FIDDLE.

这篇关于AngularJs和< select&gt ;:删除默认的选定选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！