將項添加到ui-select Angular

Question

我正在使用angular-ui-select，我有一個問題。 如何修改ui-select以便可以手動添加項目 - 不僅可以選擇ng-model中的現有項目，還可以添加新元素。

先感謝您

Answer 1

最近我想出了一個解決方案。 您可以使用ui-select-choices中的refresh選項添加一些邏輯並實現您想要的。

<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

Answer 4

ui-select在非多選框上標記有很多錯誤。 我嘗試的替代解決方案非常簡單：

<ui-select-choices repeat="name in names.concat($select.search) | filter: $select.search">
    <span ng-bind-html="name"></span>
</ui-select-choices>

這里的關鍵位是names.concat($select.search) 。 這可能不適合大型列表，但它可以工作。

Answer 5

您必須擁有我認為的模型，但是，您始終可以向模型添加更多項目。

例如，如果您有一個名為的模型

$scope.persons = [
{ name: 'Adam',      email: 'adam@email.com',      age: 10 },
    { name: 'Amalie',    email: 'amalie@email.com',    age: 12 },
    { name: 'Wladimir',  email: 'wladimir@email.com',  age: 30 },
    { name: 'Samantha',  email: 'samantha@email.com',  age: 31 },
    { name: 'Estefanía', email: 'estefanía@email.com', age: 16 },
    { name: 'Natasha',   email: 'natasha@email.com',   age: 54 },
    { name: 'Nicole',    email: 'nicole@email.com',    age: 43 },
    { name: 'Adrian',    email: 'adrian@email.com',    age: 21 }]

您可以使用添加人員到該列表

$scope.persons.push({ name: 'Nils', email: 'nils@email.com', age: 24 })

所以如果你有一個輸入字段（你可以有一個輸入字段用於電子郵件，一個用於年齡）

<input ng-model="newPerson.name"> 
<input ng-model="newPerson.age">
<input ng-model="newPerson.email"> 

（在名稱輸入中寫入nils，在電子郵件中寫入nils@email.com，在年齡輸入中寫入24。）

和一個按鈕

<button ng-click="addPerson()">

而在你的控制器中

$scope.newPerson = {name : "", email : "", age : ""}

當用戶按下按鈕時，該功能

$scope.addPerson() = function(){
    $scope.persons.push($scope.newPerson)
    $scope.newPerson = {Name : "", Email : "", Age : ""}
}

將被調用並且模型$ scope.persons將被更改並添加到您的ui-select模型中。

ui-select必須有一個模型，但您可以輕松地將任何項添加到模型中。