如何在使用 angularJs 删除标签时显示警报？

Question

我正在使用 ng-tags-input 库来显示标签，但我想在用户删除标签时显示一个 sweetAlert。我尝试了这个，但我注意到在屏幕上显示警报之前删除了标签。请参阅下面的屏幕截图。

从第二个屏幕截图中您可以看到，当我删除标签 July-2017 时，它将在确认警报框之前删除 July-2017 标签。在这种情况下，没有办法使用警告框。

在编码级别我是这样做的

HTML

<tags-input ng-model="monthTags" display-property="text" placeholder="{{ ''}}" add-from-autocomplete-only="true"  on-tag-removed="removeDiv($tag)" add-on-paste="true" on-tag-added="addDiv($tag)"  ng-required="true">
    <auto-complete  min-length="1" source="loadTags($query)"> </auto-complete>
</tags-input>

JS

$scope.removeDiv = function (tag) {

    if (tag.id) {
        swal({
            title: "Are you sure?",
            text: "You want to remove this.",
            showCancelButton: true,
            type: "warning",
            confirmButtonColor: "#37BC9B",
            confirmButtonText: "Yes, delete it!",
            closeOnConfirm: true,
        },
        function () {
            //Ajax request
        });
    }
}

现在我需要做什么来实现这一目标。请帮忙

Answer 1

您可以使用 ngTagsInput 的 onTagRemoving 回调。这是in the documentation。它指出

在删除标签之前将调用的评估表达式。这 标签可用作 $tag。此方法必须返回 布尔值 价值或承诺。如果错误值或被拒绝的承诺是 返回，标签不会被移除。

您需要将 on-tag-removed 更改为 on-tag-removing 并返回布尔值 true 以删除或 false 以恢复。

Answer 2

您需要使用promise，因为这里屏幕上有一个对话框等待用户决定要做什么。我试着用你的代码给你一些提示，比如：

HTML

<tags-input ng-model="monthTags" display-property="text" placeholder="Add Months" add-from-autocomplete-only="true"  on-tag-removed="removeDiv($tag)" add-on-paste="true" on-tag-added="addDiv($tag)"  ng-required="true">
    <auto-complete  min-length="1" source="loadTags($query)"> </auto-complete>
</tags-input>

JS

$scope.removeDiv = function (tag) {
    let promiseDivRemove = new Promise(function(resolve, reject) {
        if (tag.id) {
            swal({
                title: "Are you sure?",
                text: "You want to remove this.",
                showCancelButton: true,
                type: "warning",
                confirmButtonColor: "#37BC9B",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: true,
            },
            function (isConfirm) {
                if (isConfirm) {
                    //Ajax request
                    resolve(true);    
                } else { reject(false);}
            });
        }else{ reject(false);}
    }).then(
        function(result) { return result; },
        function(error) { return error; }
    );;
    return promiseDivRemove;
}

Answer 3

您应该在请求的成功函数中显示警报。

$http.get(url).remove().then(function (response) {
   showAlert();
})
.error(function(error){

})

Answer 4

您需要像这样检查用户的确认是真还是假：

$scope.removeDiv = function (tag) {
  if (tag.id) {
      swal({
        title: "Are you sure?",`enter code here`
        text: "You want to remove this.",
        showCancelButton: true,
        type: "warning",
        confirmButtonColor: "#37BC9B",
        confirmButtonText: "Yes, delete it!",
        closeOnConfirm: true,
    },
    function (isConfirm) {
             if(isConfirm){
                    Ajax request
              }
    });
  }
}

Answer 5

<tags-input ng-model="tags" on-tag-removing="validateRemoval($tag)"></tags-input>

  $scope.validateRemoval = function(tag) {
     alert('Are you sure you want to delete?');
  }