Инструкция выбора AngularJS с нулевым значением

Question

Инструкция выбора AngularJS с нулевым значением

0

У меня есть требование представить список выбора в 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/

Спасибо.

Neilski 29 июнь 2015, в 11:22

Источник

Теги:

angularjs

2 ответа

0

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

Dmitri Algazin 29 июнь 2015, в 08:54

Ещё вопросы

Cétia · Accepted Answer · 2015-06-29T08-22-00.000Z

Да угловая добавила пустой вариант, и вы ничего не можете с этим поделать.. но исходя из ваших потребностей, я предлагаю вам немного реорганизовать:

контроллер (удалить пустой первый объект):

$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 за этот комментарий). Тем не менее, вам может понадобиться этот рефактор, поскольку он является стандартным способом отображения пустого/сбросного выбора, не связанного с данными сервера)

К сожалению, в этом случае я не мог легко жестко закодировать опцию, поскольку она была динамической / необязательной в зависимости от выбора книги, то есть некоторые списки заголовков имеют нулевую запись заголовка, а другие нет. Я мог бы, я полагаю, настроить его на вход / выход с помощью ng-if или аналогичного, но обновление до AngularJS 1.4.1 решило проблему.