預先選擇第一項目

Question

我有一個下拉菜單如下：

<select ng-model="myDropDown" 
     ng-options="c.id as c.name for c in myUnsortedList | orderBy:'name'"></select> 

它填充有一個未排序的列表（與具有id和name屬性成員對象）根據name財產進行排序。

一個惱人的問題是AngularJS在頂部放置了一個空白選項（如左圖所示）。

作爲described here溶液是初始化在控制器代碼的列表：

$scope.myDropDown = myUnsortedList[0].id; 
           ^
            | 
            +----- Index 0 selected just to take 
              an index that always is available 

這消除了空項，但具有使任意的元件預先選擇項目的副作用在下拉菜單（右圖）中，由於myUnsortedList未排序，且與ng-options中設置的排序列表不同;因此任何元素都可以在未排序列表中具有索引0。

我希望AngularJS不要在排序菜單中預先選擇一個任意元素（即選擇第一個項目），同時避免空元素。這如何輕鬆完成？

Answer 1

一個令人討厭的問題是AngularJS在頂部放置了一個空白選項。 解決方案是初始化控制器代碼中的列表。

替代解決這個，可以把佔位符代替，使得任意元素中 預選擇的項目的下拉式菜單（右圖像）的

<select ng-model="myDropDown" ng-options="c.id as c.name for c in myUnsortedList | orderBy:'name'"> 
    <option value="">--Select--</option> 
</select> 

副作用，因爲myUnsortedList是未排序的和不 以相同的順序

$scope.mySortedList = $filter('orderBy')($scope.myUnsortedList,'name');//don't forget to inject $filter in your controller 
$scope.selected = 2; 

加價：

ng-options="c.id as c.name for c in mySortedList"