AngularJs 和 <select>：删除默认选择的选项答案

【问题标题】：AngularJs and <select>: Default selected options are removedAngularJs 和 <select>：删除默认选择的选项
【发布时间】：2013-07-26 22:48:32
【问题描述】：

我希望下面的代码呈现一个下拉列表，其中默认选择第三个选项。但是，当我将选择与 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/

谢谢！

【问题讨论】：

标签： angularjs html-select

【解决方案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。

【讨论】：

可能很明显，但是当我发现它时，如果它是一个字符串，请记住将 ng-init 值用单引号括起来，例如 ng-init="selectedColors='red'"
当您使用ng-options="row.desc for row in affiliationTable" 填充选择时，这不起作用，因为我不知道这样做时分配值的方法，您知道我该怎么做那个？
官方documentation for ng-init 声明如下：“ngInit 的唯一适当用途是对 ngRepeat 的特殊属性进行别名化，如下面的演示所示。除了这种情况，您应该使用控制器而不是而不是 ngInit 来初始化作用域上的值。”。有没有其他方法可以删除“默认”值？

【解决方案2】：

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

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

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

<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/

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

【讨论】：

【解决方案3】：

通过添加带有空值的选项来选择并将 selectedColors 初始化为空字符串（ng-init="selectedColors=''"），我们可以在顶部看到“选择颜色”选项，而不是默认选择第一种颜色：

<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>

在 Fiddle 上试试 http://jsfiddle.net/CodecPM/qxyckf7u/

【讨论】：

我选择这个答案。依赖 ng-init 本身有时会创建临时的空

【解决方案4】：

你只需要做两件事 1)ng-init="days='noday'" 2)ng-selected="true"

 <select class="filtersday" ng-init="days='noday'" ng-model="days">
 <option ng-selected="true" value="noday">--Select Day--</option>

【讨论】：

【解决方案5】：

你应该使用单引号来工作

<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>

【讨论】：

【解决方案6】：

使用 ng-selected="true"

检查以下代码：

<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>

【讨论】：