CODEWITHSUNDEEP
javascriptangularjsangular-uiangular-ui-select
MontyBurns
MontyBurns

Reputation: 99

angular ui - select: tagging without multiple - why isn't this working?

I use the following packages

$ bower list
bower check-new     Checking for new versions of the project dependencies..
(...)
├── angular#1.3.15 (1.3.16-build.113+sha.3881831 available, latest is 1.4.0-rc.2)
├─┬ angular-resource#1.3.15 (1.3.16-build.113+sha.3881831 available, latest is 1.4.0-rc.2)
│ └── angular#1.3.15 (latest is 1.4.0-rc.2)
├─┬ angular-route#1.3.15 (1.3.16-build.113+sha.3881831 available, latest is 1.4.0-rc.2)
│ └── angular#1.3.15
├─┬ angular-sanitize#1.3.15 (1.3.16-build.113+sha.3881831 available, latest is 1.4.0-rc.2)
│ └── angular#1.3.15
├─┬ angular-ui-select#0.11.2
│ └── angular#1.3.15 (1.4.0-rc.2 available)
├─┬ bootstrap#3.3.4
│ └── jquery#2.1.4
├── jquery#2.1.4
├── modernizr#2.8.3
└── normalize.css#3.0.3

and I have this angular-ui-select code

<ui-select
        tagging="createTag"
        ng-model="needs_ingredient.ingredient"
        theme="bootstrap"
        ng-disabled="disabled"
        title="Zutat auswählen">
    <ui-select-match placeholder="Zutat auswählen...">
        {{$select.selected.name}}
    </ui-select-match>
    <ui-select-choices repeat="ingredient in ingredients | filter: {name: $select.search}">
        <div ng-if="ingredient.isTag" ng-bind-html="ingredient.name +' <small>(hinzufügen)</small>'| highlight: $select.search"></div>
        <div ng-if="!ingredient.isTag" ng-bind-html="ingredient.name + ingredient.isTag | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

where one element of the ingredients-list looks like this

{
    "id": 123,
    "name": "xyz"
},

and this part of js-code to create new objects for the list

$scope.createTag = function (newTag) {
    console.log('createTag');

    return {
        id: null,
        name: newTag
    };
};

I'd like this to be a list where I can select ONE item or could add a new one, but it isn't working.

Where is the mistake? Is tagging without multiple selections not working?

Upvotes: 1

Views: 1977

Answers (3)

Jc CASA
Jc CASA

Reputation: 11

You can set : 

tagging-label="false"

in the ui-select tag.

It works for me!

Upvotes: 1

Ganesh Vellanki
Ganesh Vellanki

Reputation: 421

For future reference,

you can make it single select by setting

    taggingLabel to false.

in the directive

Upvotes: 0

MontyBurns
MontyBurns

Reputation: 99

i found the issue on github of angular-ui.

somebody posted a temporary workaround

https://github.com/angular-ui/ui-select/issues/890

Upvotes: 0

Related Questions