制作一种＆＃34;标签＆＃34; Angular中的列表

Question

我一直试图在Angular中创建一个列表，您可以在其中选择多个项目，并且这些项目将显示在选择附近的字段中，您可以随意删除它们;喜欢＆＃34;标签＆＃34;你在这里问一个问题的领域。

到目前为止，我做到了这一点：

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

它给了我这个： 在这里，您可以看到列表正常工作，就像我想要的那样 这里是选择数据的字段

我希望选择一个元素会将其从列表中删除（或者无法再次选择它）并创建一个＆＃34;块＆＃34;在这个领域，如果我愿意的话，它的名字有点十字架或者什么来删除它。 从列表中挑选另一个元素会将其添加到字段中，而不是重置它。

我不知道怎么做，就像我看到逻辑但我不知道如何在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);
  }
}