Angularjs ui-select tagging not working

2
votes

THE SITUATION:

I have an angular app that sends emails.
There are three fields: Address - Subject - Text.
The address field is built using angular ui-select

The email address can be choosen from the list or it may be entered anew.
The problem is that i am not able to create a new entry.

In the documentation there is written that in order to enter a new value it can be used the attribute tagging.

But i don't why, is not working with me.


THE CODE:

(simple new tag add example)

<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'];


PLUNKER:

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

As you can see is not possible to insert a new value.


QUESTION:

How can i properly insert a new value in angular ui-select?

2
javascriptangularjsselecttagsui-select
Hello :) Exactly, i want to be able to create a new colour – FrancescoMussi
I've deleted my answer and had a look at one of the official examples and it doesn't seem to work. I've added a tagging attribute to the first ui-select and entering text followed by Enter or "," doesn't add the text as a tag. plnkr.co/edit/EbeqFz3e7fwShtXlbXeN?p=preview – camden_kid
Thank you for your efforts. Strange no? It should work as it is explained in the documentation – FrancescoMussi

2 Answers

2
votes

The plunkers given use 0.8.2. Tagging works with 0.8.3.

1
votes

You can do this by some trick with jQuery—

  1. Just add class or id to ui-select tag.

  2. Add access by id and class in angular controller like this: 

    <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;
    }
});