向ui添加项目-选择Angular

Question

我正在使用angular-ui-select，我有一个问题。如何修改ui-select，以便可以手动添加项目-不仅从ng-model中的现有项目中选择，还可以添加新元素。

提前谢谢你

Answer 1

最近，我想出了一个解决方案。您可以使用ui-select-choices中的刷新选项来添加一些逻辑并实现您想要的功能。

<ui-select-choices ...
  refresh=”main.refreshResults($select)” 
  refresh-delay=”0"
>
  <span>{{table.description}}</span>
</ui-select-choices>

然后在控制器上

function refreshResults($select){
 var search = $select.search,
   list = angular.copy($select.items), 
   FLAG = -1;

 //remove last user input
 list = list.filter(function(item) { 
   return item.id !== FLAG; 
 });

 if (!search) {
   //use the predefined list
   $select.items = list;
 }
 else {
   //manually add user input and set selection
   var userInputItem = {
     id: FLAG,
     description: search
   };
   $select.items = [userInputItem].concat(list);
   $select.selected = userInputItem;
 }
}

我使用搜索字段($select.search)和一个基本的对象结构id和description来实现它。希望能有所帮助。

Plunker

Answer 2

只需将tagging="true“添加到ui-select指令中即可，请参阅演示：

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

即：

 <ui-select multiple ng-model="multipleDemo.colors" tagging="true" theme="select2"  style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in peopleAsync | filter:$select.search">
      {{color}}
    </ui-select-choices>
  </ui-select>

Answer 3

当你使用一个字符串时，只需添加tagging，但是当你使用一个对象时，你可能会得到一些错误。

在这种情况下，您需要将转换函数指定为tagging。此函数应返回新对象。请参见以下代码：

<ui-select multiple tagging="transformFunction" tagging-label="(custom 'new' label)" ng-model="multipleDemo.colors">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
    {{color}}
</ui-select-choices>
</ui-select>

在你的控制器中

transformFunction = function(new_value){ //new value is a string
   //now construct the object and return them.
   var new_object = {};
   new_object.name = new_value;
   new_object.... = ...
   //some http request if you need them.
   //some treatement

   return new_object;
}

请随意参考此示例：

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