CODEWITHSUNDEEP
javascriptarraysangularjsselectui-select
FrancescoMussi
FrancescoMussi

Reputation: 21610

Angular ui-select array of objects - first item not selectable

SITUATION:

In my app I am using angular ui-select displaying a list of people (array of objects).

It is working fine except one little issue:

The first item of the list is not selectable. I cannot choose it.


CODE:

<ui-select multiple tagging tagging-label="new tag" ng-model="multipleDemo.selectedPeople" theme="select2" ng-disabled="disabled" style="width: 800px;">
  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
    <small>
      email: {{person.email}}
      age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
    </small>
  </ui-select-choices>
</ui-select>


PLUNKER:

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


QUESTION:

How can i select the first item in angular ui-select - array of objects?


NOTE:

The answer from Alexander is the correct one because give a solution to this problem for ui-select which version is < than 0.9.5.

From version 0.9.5. this problem has been resolved.

This was the issue opened in GitHub:

https://github.com/angular-ui/ui-select/issues/477#issuecomment-66795541

Upvotes: 2

Views: 2142

Answers (2)

Oleksandr T.
Oleksandr T.

Reputation: 77482

Fix for v0.9.4..

After 10 minutes debugging I found error in this line (ui-select source code)

item = ctrl.tagging.fct !== undefined 
         ? ctrl.tagging.fct(ctrl.search) 
         : item.replace(ctrl.taggingLabel,'');

but item is object not string, that's why happens error. If you set this tagging-label="" option to false, you will can choose first item. I don't know when item will be passed as a string, maybe this is bug, or need set other options to achieve that..

Upvotes: 1

Brian
Brian

Reputation: 3958

It turns out there is a bug in v0.9.4 and earlier with the tagging function that causes this. The best fix is to update ui-select to version 0.9.5+.

As a side note, your example is missing the required tagging $scope function, please read the docs for the plugin: https://github.com/angular-ui/ui-select/wiki/ui-select.

tagging - Enable tagging mode (add new items on the fly). Accepts a string which is a scope function. If your model is an array of objects, this string is required. The function will be passed the new item as a string and should return an object which is the transformed value to be pushed to the items array

If you are working with an array of objects, you MUST define a tagging function so that the directive knows what you want the object about to be pushed to the array should look like.

Upvotes: 0

Related Questions