Как сделать разные просматриваемые значения в ng-options и выбрать результат

У меня есть выбор angularjs (список стран с name и code.).

<select ng-model="entity.country_code"
        ng-options="c.code as c.name for c in countries">
</select>

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

Я хочу, чтобы раскрывающийся список выбора был заполнен такими строками, как «United Kingdom (+44)», «Russia (+7)».

введите здесь описание изображения

И когда пользователь выберет один из этих вариантов, я хочу, чтобы поле выбора заполнялось только цифрами (+44 или +7).

введите здесь описание изображения

Является ли это возможным?

UPD1: еще раз:

введите здесь описание изображения

Вы можете выбрать United States (+1) в раскрывающемся списке выбора (левая часть на последнем изображении), и в результате выбора вы увидите 1 в поле выбора (правая часть изображения).


angularjs ng-options angularjs-ng-options
person Sergei Panfilov    schedule 24.03.2016    source источник
comment
Я не думаю, что это возможно с использованием обычного ‹select›. Вам следует попробовать эту библиотеку: isteven.github.io/angular-multi-select/#/main   -  person Coder John    schedule 24.03.2016
comment
Да, возможно, вы правы, я не уверен в сопоставимости браузеров, даже если это возможно   -  person Sergei Panfilov    schedule 24.03.2016
comment
Эта библиотека протестирована в разных браузерах, мы используем ее в наших живых проектах. Вы можете начать использовать его, и если есть сомнения в этой библиотеке, я помогу :)   -  person Coder John    schedule 24.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

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

Вот пример

<select ng-model="entity.country_code">
    <option ng-repeat="country in countries" value="{{ country.code }}">
        {{ country.name }} (+{{ country.code }})
    </option>
</select>
person Naigel    schedule 24.03.2016
comment
Не уверен, что это работа. По крайней мере, в chrome+mac os. По-прежнему {{ country.name }} (+{{ country.code }}) в поле выбора результатов (но entity.country_code содержит country.code, как и планировалось) - person Sergei Panfilov; 24.03.2016
comment
вы имеете в виду, что {{ country.name }} не анализируется angular, и вы видите это как в коде? - person Naigel; 24.03.2016

arrow_upward
1
arrow_downward

У вас может быть что-то вроде ниже

<select ng-model="entity.country_code"
     ng-options="c.code as (c.name + ' ('+ c.code + ')') for c in countries">
</select>
person Pankaj Parkar    schedule 24.03.2016
comment
Нет, нет, речь идет не о том, как отформатировать значение в раскрывающемся списке, а о том, как сделать значения в раскрывающемся списке похожими на c.code as (c.name + " ("+ c.code + ")"), но когда вы выберете одно из значений, и раскрывающийся список исчезнет, ​​как сделать так, чтобы выбранное значение выглядело как c.code в поле выбора - person Sergei Panfilov; 24.03.2016
comment
@SergeyPanfilov Я запутался, о чем вы спросили выше? - person Pankaj Parkar; 24.03.2016