Предварительно выберите первый элемент в отсортированном раскрывающемся меню с помощью AngularJS

У меня есть раскрывающееся меню следующим образом:

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

Он заполняется несортированным списком (с объектами-членами, имеющими свойства id и name), отсортированным по свойству name.

Досадная проблема заключается в том, что AngularJS помещает пустую опцию вверху (изображено слева).

Как описано здесь, решение состоит в том, чтобы инициализировать список в коде контроллера:

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

Это удаляет пустой элемент, но имеет побочный эффект, делая произвольный элемент предварительно выбранным элементом в раскрывающемся меню (правое изображение), поскольку myUnsortedList не отсортирован и не в том же порядке, что и отсортированный список, установленный в ng-options; следовательно, любой элемент может иметь индекс 0 в несортированном списке.

Я бы хотел, чтобы AngularJS не выбирал заранее произвольный элемент в отсортированном меню (т. е. вместо этого выбирал первый элемент), избегая при этом пустого элемента. Как это можно легко сделать?


drop-down-menu angularjs
person Gruber    schedule 11.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Досадная проблема заключается в том, что 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"
person ram1993    schedule 11.10.2016