问问题
37313 次
6 回答
23
修复实现的最简单方法是使用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上试试。
于 2013-07-26T23:21:52.397 回答
10
当您将选择绑定到模型时,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;
}]);
这是一个正在运行的示例。
或者,您可以使用 ng-init 对其进行初始化,例如在此示例中:
<div ng-init="selectedColors=3">
编辑:在第一个示例中删除了 selected 属性,不再需要它。
于 2013-07-26T23:02:25.167 回答
2
你应该使用单引号来工作
<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>
于 2018-11-14T06:14:11.350 回答
2
通过添加带有空值的选项来选择并将 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/
于 2015-09-15T12:54:37.603 回答
2
你只需要做两件事 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>
于 2015-10-01T06:38:47.297 回答
0
使用 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>
于 2017-11-03T13:01:36.827 回答