Теги Angularjs ui-select не работают

СИТУАЦИЯ:

У меня есть угловое приложение, которое отправляет электронные письма.
Есть три поля: Адрес - Тема - Текст.
Поле адреса создается с использованием углового ui-select.

Адрес электронной почты можно выбрать из списка или ввести заново.
Проблема в том, что я не могу создать новую запись.

В документации написано, что для ввода нового значения можно использовать атрибут пометка.

Но я не знаю, почему, не работает со мной.


КОД:

(пример добавления простого нового тега)

<ui-select multiple tagging tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" style="width: 300px;">

    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>

    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>

</ui-select>



$scope.availableColors = ['Red','Green','Blue','Yellow','Magenta','Maroon','Umbra','Turquoise'];
$scope.multipleDemo = {};
$scope.multipleDemo.colors = ['Blue','Red'];


ПЛАНКЕР:

http://plnkr.co/edit/T55LeKK66Idb3lD8DDPz?p=preview

Как видите, вставить новое значение невозможно.


ВОПРОС:

Как я могу правильно вставить новое значение в angular ui-select?


javascript angularjs tags select ui-select
person FrancescoMussi    schedule 01.12.2014    source источник
comment
Привет :) Точно, я хочу создать новый цвет   -  person FrancescoMussi    schedule 01.12.2014
comment
Я удалил свой ответ и посмотрел один из официальных примеров, и, похоже, он не работает. Я добавил атрибут тегирования к первому выбору пользовательского интерфейса, и ввод текста с последующим нажатием Enter или не добавляет текст в качестве тега. plnkr.co/edit/EbeqFz3e7fwShtXlbXeN?p=preview   -  person camden_kid    schedule 03.12.2014
comment
Спасибо за старания. Странно нет? Должно работать так, как описано в документации   -  person FrancescoMussi    schedule 03.12.2014

Ответы (2)


arrow_upward
2
arrow_downward

Данные плунжеры используют 0.8.2. Тегирование работает с 0.8.3.

person Rory G    schedule 03.12.2014
comment
Боже мой! Благодарю вас! - person FrancescoMussi; 03.12.2014

arrow_upward
1
arrow_downward

Вы можете сделать это с помощью некоторого трюка с jQuery

  1. Просто добавьте класс или идентификатор в тег ui-select.

  2. Добавьте доступ по идентификатору и классу в угловом контроллере следующим образом:

    <ui-select reset-search-input="true" ng-model="myModel.SerialNumber" theme="bootstrap"
        ng-required="true" name="SerialNumber" class="YourClass" Id="YourId">
    <ui-select-match placeholder=" {{'VehicleMaster.SerialNumber'| translate}}">
        {{$select.selected.SerialNumber}}    
    </ui-select-match>
    <ui-select-choices repeat="item in IMEISerialsDropDown | filter: $select.search">
        <div ng-bind-html="item.SerialNumber"></div>
    </ui-select-choices>
</ui-select>        

    $(".YourClass").find("input.ui-select-search").on("focusout", function (val) {
    var variable = $(".YourClass").find("input.ui-select-search").val();
    if (variable .length > 0 && variable .length != null) {
        var variableJson = {
                    SerialNumber: variable ,
                };
                $scope.myModel.ModelProperty= variableJson;
    }
});
person Trilok Chandra    schedule 21.06.2015