4

i'm a newbie on angularjs and angular-ui and i have a problem with module ui-select. I need to select single element from a list and if there isn't a value, the user can add manually, but the tagging system of ui-select doen't work for a single value and i don't know why.

This is the ui-select code:

<ui-select tagging="tagStation" tagging-label="(Add station)" ng-model="new.station">
  <ui-select-match placeholder="Choose or Add">{{$select.selected.label}}</ui-select-match>
   <ui-select-choices repeat="station.value as station in stationList | filter: { label: $select.label }">
    <div ng-bind-html="station.label | highlight: $select.search"></div>
   </ui-select-choices>
 </ui-select>

And this is the function for tagging attribute:

$scope.tagStation = function (newTag) {
            var item = {
                label: newTag,
                value: 0
            };

            return item;
        };

Can someone help me? Thx

Dimitri Dewaele
  • 10,311
  • 21
  • 80
  • 127
MTS
  • 199
  • 11

2 Answers2

2

Check out the thread and the particular answer I'm linking to here. There's a workaround for now where you add the attribute tagging-label="false". Hopefully that fixes your problem! I'm looking at a similar issue, but unfortunately for me, this workaround doesn't seem to address my particular problem as I can't get any custom value to stick.

sabliao
  • 147
  • 3
  • 10
0

I was facing the same issue and found a better workaround using ui-select-no-choice

The problem with tagging and single choice is that it changes the normal behaviour of the dropdown, for example when you type something to search it stops selecting the first matching value, this makes the normal functionality worse and when you have another select without this functionality next to it, it becomes worse

Example using ui-select-no-choice:

        <ui-select ng-model="myNgModel">
            <ui-select-match placeholder="Your Placeholder">{{$select.selected}}</ui-select-match>
            <ui-select-choices repeat="item in items | filter: $select.search">
                <div ng-bind-html="item | highlight: $select.search"></div>
            </ui-select-choices>
            <ui-select-no-choice>
                    <span ng-click="addTheNewElementToList($select.search)">Add this new Item ({{$select.search}})</span>
            </ui-select-no-choice>
        </ui-select>

Assuming you want to avoid duplicates and in case the element does not exist in the list, the "add item" option will appear.

It is not perfect but a good starting point to fit your needs

Int
  • 41
  • 4