Question

我正在为项目使用语义UI，我只是遇到了一个小问题。

在我的多重搜索下拉列表中，我希望能够删除标签并执行回调功能。

回调函数工作正常，但在十字架上单击时不会删除标签。它就像我选择它一样呆在那里。

我也在为这个项目使用Angular JS，所以这里是下拉列表的指令：

app.directive('dropdownSearchPersonalities', function () {
    return {
        restrict : 'A',
        link : function (scope, elem, attrs) {
            var personalitiesLength = scope.student.personalities.length;
            var studentPersonalities = [];

            for(var i = 0; i < personalitiesLength; i++) {
                studentPersonalities[i] = scope.student.personalities[i].name;
            }

            $(elem).dropdown({
                allowAdditions : true,
                onAdd: function (value) {
                    if(personalitiesLength) {
                        if($.inArray(value, studentPersonalities) != -1)
                            return;
                        else
                            scope.addPersonality(value, scope.studentId);
                    } else {
                        scope.addPersonality(value, scope.studentId);
                    }
                },
                onRemove: function (value, text, choice) {
                    scope.removePersonality(value, scope.studentId);
                }
            });

            $(elem).dropdown('set selected', studentPersonalities);
        }
    }
});

我再说一遍，唯一不起作用的是标签没有删除，如果我刷新页面，那意味着要删除的标签就不见了。

以下是尝试删除时的外观图像：

光标没有显示，但实际上是在十字图标上。

有人遇到过这个问题吗？我该如何解决？

非常感谢！

Answer 1

使用onChange，然后在输入（事件，数据）中，“数据”部分将检测是否单击“ x”或添加标签。例如：

onChange (event, data) {
  this.setState({
    data: { ...this.state.data, [data.name]: data.value}
  });
}

该值会自动使用选定的所有选项更新阵列。

语义UI多个搜索下拉列表 - onRemove不删除标签

1 个答案: