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

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

我花了好几个小时才找到解决方案，相信我！

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

在Controller内部，特定的页面初始化函数，我已经插入了10个字符串。

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

在Controller内部初始化rfc.flag like -

$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

Answer 2

默认显示的代码选择选项

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

Answer 3

你可以像这样修改你的代码：

<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

或者你可以使用ng-init，就像@zsong提到的那样

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

如果使用 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 5

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 6

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

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