javascript - 使用 ui-select-match 选择多个条目

Question

我的模板中有这个:

<ui-select multiple ng-model="selectedProjectTypes" theme="select2" style="min-width: 200px;">
    <ui-select-match placeholder="Select Typ...">
        [[selectedProjectTypes]]
    </ui-select-match>
    <ui-select-choices repeat="project_type in project_types">
        <div>[[project_type.name]]</div>
    </ui-select-choices>

我的[[selectedProjectTypes]]包含选定的值。当我打开表格时，里面什么也没有。(API 返回相关条目。- 这有效)

project_types 包含以下内容:

[{"id":4,"slug":"event","active":1,"name":"Event","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 09:49:43","updated_at":"2015-12-22 09:49:43","deleted_at":null},{"id":5,"slug":"sfsfsfsfsfsfsfsfsfsf","active":1,"name":"sfsfsfsfsfsfsfsfsfsf","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 09:50:23","updated_at":"2015-12-22 09:50:23","deleted_at":null},{"id":6,"slug":"eteett","active":1,"name":"eteett","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 10:07:55","updated_at":"2015-12-22 10:07:55","deleted_at":null},{"id":7,"slug":"sfssfsf","active":1,"name":"sfssfsf","description":"","created_by":0,"updated_by":0,"created_at":"2015-12-22 12:36:37","updated_at":"2015-12-22 12:36:37","deleted_at":null}]

这是一个 json 对象数组。这是由 api 填充的。有了这个:

<ui-select-choices repeat="project_type in project_types">
    <div>[[project_type.name]]</div>
</ui-select-choices>

我可以循环遍历数组，选择字段显示带有project_type名称的所有选项。它有效。

但是当我尝试选择 select 的选项时，第一个数组元素的整个 json 元素将被选择...(无论我选择什么选项)。

如何解决选择选项时选择字段中仅显示相应名称的问题？

Answer 1

您正在 ui-select-choices 指令中选择整个对象。请尝试以下代码:

$scope.project_type = {}; 

 <p>Selected: {{project_type.selected}}</p>
 <ui-select ng-model="project_type.selected" theme="select2" style="min-width: 300px;">
   <ui-select-match>{{$select.selected.name}}</ui-select-match>
  <ui-select-choices repeat="project_type.name as project_type  in project_types ">
    <div ng-bind-html="project_type.name"></div>
  </ui-select-choices>
 </ui-select>