Question

我正在使用Angular http服务执行DELEET操作，它工作正常，删除数据记录后我还要从表中删除该行。

以下是我的所有代码

$scope.DeleteSchedule = function (recordId) {
   var v =$window.confirm('Are you sure you want to delete ?');
   if (v == true) {
       var row = '#row' + recordId;
       var table = 'table #tbl_Schedule_Delete tr ' + row;
       $http({
           url: '@Url.Action("DeleteSchedule", "Admin")',
           method: "DELETE",
           params: {
               recordId: recordId
           }
       }).then(function mySuccess(response) {
           alert('Row Deleted Successfully');
           angular.element(document.querySelector(table)).remove();
           //$('table #tbl_Schedule_Delete tr' + row).remove();
       }, function myError(response) {
           $window.alert('Warning! It failed.');
       });
   }
}

对jQuery remove()的反对似乎什么都不做

变量表的值将是'table #tbl_Schedule_Delete tr＃row35'

angular.element(document.querySelector(table)).remove();

我检查了控制台日志，没有错误或警告。如何在角度JS中执行此操作

更新1： 下面是表格标记

<tr id="row34" role="row" class="odd">
<td id="delete34" class="sorting_1"> 
<a id="deletebtn_34" ng-click="DeleteSchedule('34')"><i class="fa fa-times fa-lg" aria-hidden="true" style="color:#e90029"></i></a>
</td>
<td>34</td>
<td>11956</td>
<td>Tota Ram</td>
<td>04-10-2017</td>
<td>02-12-2017</td>
<td>Haryana</td>
<td>Badaun</td>
<td>03-11-2017</td>
</tr>

Answer 1

问题在于您的选择查询。选择器

表#tbl_Schedule_Delete tr＃row35

实际上匹配以下HTML结构：

public partial class Form1 : Form
{
    public ConcurrentStack<long> journal = new ConcurrentStack<long>();
    public Form1()
    {
        InitializeComponent();
    }

    private void button1_Click(object sender, EventArgs e)
    {
        Task[] tasks = new Task[10];
        for (long i = 0; i < 10; i++)
        {
            tasks[i] = Task.Factory.StartNew(() => getJournal(i));
        }
        Task.WaitAll(tasks, 60000);
        List<long> list = journal.ToList();
        textBox1.SuspendLayout();
        foreach (long l in list)
        {
            textBox1.AppendText(l.ToString("### ### ### ### ") + Environment.NewLine);
        }
        textBox1.ResumeLayout();

    }
    public void getJournal(long val)
    {            
        journal.Push(val);
    }
}

如您所见，这与您的HTML结构不符。这是因为在匹配元素和ID时，您的选择查询包含几个空格。这会导致它在匹配id时查找子元素。

要修复它，您的选择器应该如下所示：

<table>
    <any-element id="#tabl_Schedule_Delete">
        <tr>
            <any-element id="#row35"></any-element>
        </tr>
    </any-element>
</table>

旁注：在var table = 'table#tbl_Schedule_Delete tr' + row; // Notice the lack of whitespaces after 'table' and 'tr'内使用document.querySelector()是多余的。您可以简单地使用angular.element()，因为angular.element(table)等同于使用angular.element（如果您加载了jquery，它实际上完全相同）

Answer 2

我不会使用angular.element删除该行，但使用ng-show ng-show显示/隐藏该行。

<tr id="row34" role="row" class="odd" ng-show="!deleted[34]">

结合：

在您的控制器中删除后：

scope.deleted[recordId] = true;

如何使用角度js从表中删除行？

2 个答案: