在Angular中製作一個「標籤」列表

Question

我一直試圖在Angular中創建一個列表，您可以選擇多個項目，並且這些項目將顯示在select附近的字段中，並且您可以刪除他們隨意;就像你在這裏問一個問題時的「標籤」字段一樣。

到目前爲止，我這樣做：

  <md-input-container class="md-block"> 
      <p>{{classesSelected}}</p> 
      <md-select ng-model="classesSelected" multiples> 
       <md-option ng-value="classe.name" ng-repeat="classe in vm.classes"> 
        {{classe.name}}       
       </md-option> 
      </md-select> 
     </md-input-container> 

它給了我這樣的： 在這裏，你可以看到列表中的工作就像我希望它 這裏的領域與選擇的數據

我想選擇一個元素將它從列表中刪除（或使它不可能再次選擇），並在該字段中創建一個「塊」，它的名字有點交叉或要刪除的東西如果我想要。 從列表中挑選另一個元素會將其添加到該字段，而不是重置它。

我不知道該怎麼做，就像我看到的邏輯，但我不知道如何在Angular中實現它。有人可以幫我嗎 ？

Answer 1

您的解決方案可能是使用兩個列表：

與項目

• 一個列表，用戶可以選擇與用戶選擇的

的項目我不知道

一個列表你想要什麼， 但這裏是一個jsfiddle

function MyCtrl() { 
    this.options = ['Maternelle', 'CP', 'CE1', 'CM1'];//Possible to select 
    this.selected = [];//Chosen by user 

} 

MyCtrl.prototype.change = function(value) {//Called when the user select an option 
    if (value && value.length) { 
    this.selected.push(value); 
    this.options = this.options.filter(x => x != value); 
    } 
} 


MyCtrl.prototype.removeSelection = function(value) {//Called when the user click on the little cross 
    if (value && value.length) { 
    this.options.push(value); 
    this.selected = this.selected.filter(x => x != value); 
    } 
}