У меня есть требование представить список выбора в AngularJS, который содержит одно значение нулевого значения. Здесь заглушка углового контроллера:
function BookController($scope) {
$scope.book = {
titleId: null
};
$scope.titles = [
{id: null, text: "Book Title <null>"},
{id: 1, text: "Book Title #1"},
{id: 2, text: "Book Title #2"},
{id: 3, text: "Book Title #3"}
];
}
Это работает так, как ожидалось, за одним исключением, Угловая, кажется, добавляет дополнительный элемент "option" в главе списка:
<option value="" selected="selected" label=""></option>
Эта опция не оказывает отрицательного влияния на функцию - даже если пользователь ее выбирает, в списке выбора выбирается первый "реальный" вариант. Интересно, что (?) Эта опция появляется только при выборе нулевой опции, если выбрана опция valued/non-null, тогда пустая опция исчезает.
С точки зрения пользовательского интерфейса я не думаю, что это идеально - кто-нибудь знает, что вызывает это, и можно ли его избежать?
JSFiddle доступен здесь https://jsfiddle.net/xab21mrr/4/
Спасибо.
Да угловая добавила пустой вариант, и вы ничего не можете с этим поделать.. но исходя из ваших потребностей, я предлагаю вам немного реорганизовать:
контроллер (удалить пустой первый объект):
$scope.titles = [
{id: 1, text: "Book Title #1"},
{id: 2, text: "Book Title #2"},
{id: 3, text: "Book Title #3"}
];
шаблон:
<select ng-model="book.titleId" ng-options="title.id as title.text for title in titles">
<option value="">Book Title null</option>
</select>
Таким образом, у вас будет опция "null" вместо пустой
Исправлена ошибка: исправлена ошибка (спасибо JB Nizet за этот комментарий). Тем не менее, вам может понадобиться этот рефактор, поскольку он является стандартным способом отображения пустого/сбросного выбора, не связанного с данными сервера)
<select ng-model="book.titleId" ng-options="title.id as title.text for title in titles">
<option value="" disabled selected style="display: none;">Select book</option>
</select>