使用AngularJS

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"