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

时间:2016-01-04 13:29:58

标签: javascript jquery angularjs json ui-select

我在模板中有这个:

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

我可以遍历数组,select字段显示了project_type名称的所有选项。它有效。

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

如果我选择一个选项,如何修复它只会在选择字段中显示相应的名称?

1 个答案:

答案 0 :(得分:0)

您正在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>