Question

我正在使用ui-select如下。

<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>

它正在迭代的JSON是

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

但UI下拉列表显示＆＃34;未找到任何功能＆＃34; 。问题是什么我的目标是在下拉菜单中显示components作为个人选择。 AFAIK需要通过在ui-select-choices中使用嵌套重复以某种方式完成。我怎么能这样做？

Answer 1

<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: 'adam@email.com',      age: 12, country: 'United States' },
{ name: 'Amalie',    email: 'amalie@email.com',    age: 12, country: 'Argentina' }];

你可以像这样使用它。在这里，trustAsHtml就是方法。

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

ui-select将数组元素显示为下拉列表中的选项

1 个答案: