Question

我希望以下代码能够在默认情况下选择第三个选项的情况下呈现下拉列表。但是，当我使用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/

谢谢！

Answer 1

修复实施的最简单方法是使用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上试用。

Answer 2

将select绑定到模型时，Angular会覆盖“selected”属性。如果您检查渲染的DOM，您会发现添加了一个新项目：

<option value="? undefined:undefined ?"></option>

为了自动选择第三个选项，您需要在范围内预先填充模型。有几种方法可以做到这一点，包括将select包装在控制器中：

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

然后在控制器中定义该模型。

var myApp = angular.module('myApp', [])
    .controller('MyCtrl', ['$scope', function ($scope) {
    $scope.selectedColors = 2;
}]);

这是一个正在运行的例子。

http://jsfiddle.net/93926/

或者，您可以使用ng-init初始化它，例如在此示例中：

<div ng-init="selectedColors=3">

http://jsfiddle.net/9JxqA/1/

编辑：删除了第一个示例中的选定属性，不再需要它。

Answer 3

通过添加带空值的选项来选择并初始化selectedColors为空字符串（ng-init =＆＃34; selectedColors =＆＃39;＆＃39;＆＃34;），我们可以看到＆＃39;选择颜色＆＃39;顶部的选项，而不是默认选择第一种颜色：

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

在小提琴http://jsfiddle.net/CodecPM/qxyckf7u/

上试试

Answer 4

你只需做两件事 1）NG-INIT =＆＃34;天=＆＃39; noday＆＃39;＆＃34; 2）NG-选定=＆＃34;真＆＃34;

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="copy"><a href="http://brightwaay.com">Here</a> </div>
<br/>
<div id="copied"></div>
<script type="text/javascript">
    $(function(){
        $('#copy').clone().appendTo('#copied');
    });
</script>
</body>
</html>

Answer 5

使用ng-selected =＆＃34; true＆＃34;

检查以下代码：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<select ng-model="foo" ng-app >
    <option value="1">1</option>
    <option ng-selected="true" value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

＆＃13;

Answer 6

您应该使用单引号

<select ng-model="liveDataType" ng-init="liveDataType='1'" class="form-control input height" required>
    <option value="1">Running data</option>
    <option value="2">Rest Data</option>
    <option value="3">All Data</option>
</select>

AngularJs和<select>：删除默认选定的选项</select>

6 个答案: