ui-select show array elements as choices in drop down

Question

I am using ui-select as follows.

<ui-select id="ItemId" ng-model="ctrl.ItemId" theme="bootstrap"
                       ng-disabled="ctrl.DownDisabled" required>
                <ui-select-match placeholder={{ctrl.Placeholder}}>{{$select.selected.item}}
                </ui-select-match>
                <ui-select-choices
                        repeat="item in ctrl.owners.components">
                    <div ng-bind-html="item | highlight: $select.search"></div>
                </ui-select-choices>
                <ui-select-no-choice>
                    No features were found
                </ui-select-no-choice>
            </ui-select>

The JSON it is itearing over is

ctrl.owners = {
            value : 123,
            teamName : ABC,
            components : [a,b,c]
            };

But UI dropdown shows "No features were found" . What is the issue. My objective is to show the components as individual choices in the drop-down. AFAIK this needs to be done in some way by using a nested repeat in ui-select-choices . How canI do that?

can you put up a plunker?

Max Koretskyi
– Max Koretskyi

2016-11-03 09:54:04 +00:00
Commented Nov 3, 2016 at 9:54 — Max Koretskyi
– Max Koretskyi, Commented Nov 3, 2016 at 9:54

Sasikala J · Accepted Answer · 2016-11-03 09:59:39Z

2

<div class="form-group ">
   <ui-select ng-model="person.selected" theme="bootstrap">
   <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
   <ui-select-choices repeat="item in people | filter: $select.search">
       <div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
        <small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
   </ui-select-choices>
   </ui-select>
</div>

$scope.people = [
{ name: 'Adam',      email: '[email protected]',      age: 12, country: 'United States' },
{ name: 'Amalie',    email: '[email protected]',    age: 12, country: 'Argentina' }];

You can use like this it will work. Here trustAsHtml is method.

  $scope.trustAsHtml = function(value) {
    return $sce.trustAsHtml(value);
  };

answered Nov 3, 2016 at 9:59

Sasikala J

5265 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

station Over a year ago

How to iterate if $scope.people contains a key with array of values that needs to shown as a choice.

Collectives™ on Stack Overflow

ui-select show array elements as choices in drop down

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related