Question

您好我当前的情况是：我想要一个默认值，应该选择..即使选择了select然后也可以接受..但它一开始就是空白..我的代码是这个

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
</select>

我也使用了这段代码，但没有工作:(

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
    <option selected="selected">Select</option>
</select>

请查看我的代码。

Answer 1

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <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>

Answer 2

您可以像这样修改代码：

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">
    <option value="">Select</option>
</select>

这是plnkr：http://plnkr.co/edit/fekkRctRM59ydI6zDnpY?p=preview

或者您可以像@zsong

中提到的那样使用ng-init

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-init="selectedItem='YourDefaultValue'" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">

    </select>

或者您可以查看this

Answer 3

默认情况下显示的代码选择选项

<select ng-model="your model" ng-options="your options">
<option selected="selected" value="">Select options</option>
</select>

Answer 4

您的ngModel为selectedItem，因此您必须将selectedItem设置为您希望在控制器中默认的值：

//This sets the default value to the first item in your list
$scope.selectedItem = $scope.task.dropdownvalues[0].value

Answer 5

如果使用ng-option

，则不应该有选项标签

使用ng-model代替如下。

<select class="form-control" ng-options="tsk.value for tsk in task.dropdown_values track by tsk.id" ng-model="selectedItem" ng-change="checkvalue(task.id, selectedItem)" style="width:100%;margin-right:4%;">

控制器中的

$scope.selectedItem = dropdown_values[0];

将解决您的问题。

Answer 6

很多次我都花了很多时间来找出解决方案， 相信我！

[1] Select Option带数字（用于Pagination，页面大小选择）

<select id="select_pagination_pages" ng-model="recordsInPage">
    <option value="10" selected>10</option>
    <option value="15">15</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="50">50</option>
    <option value="75">75</option>
    <option value="100">100</option>
    <option value="150">150</option>
    <option value="200">200</option>
    <option value="250">250</option>
</select>

内部控制器，特定的页面初始化功能中，我已插入10作为String。

$scope.recordsInPage = "10".toString();

[2]第二Select Option是简单的是或否选择。

<select class="rfc_text" id="select_flag" ng-model="rfc.flag">
    <option value="yes" selected>YES</option>
    <option value="no">NO</option>
</select>

内部控制器将rfc.flag初始化为-

$scope.rfc.flag = "yes";

[3]第三个Select Option是特殊的，并且在很小的情况下，模型将仅使用最后四个选项值，但是默认情况下会选择第一个选项。

<select id="select_timezone" ng-model="timezone_search">
    <option value="" selected>Search Entire</option>
    <option value="CountryCode">Country Code</option>
    <option value="CountryName">Country Name</option>
    <option value="TimeZone">Time Zone</option>
    <option value="TimeOffset">Time Offset</option>
</select>

内页控制器初始化-

$scope.timezone_search = "";

我认为三个例子足以满足人们的需求。：D

AngularJS：默认情况下未选择选择选项

6 个答案: