简单的待办事项列表,但列表页面上的每个项目都有一个删除按钮:

enter image description here

相关模板HTML:

<tr ng-repeat="person in persons">
  <td>{{person.name}} - # {{person.id}}</td>
  <td>{{person.description}}</td>
  <td nowrap=nowrap>
    <a href="#!/edit"><i class="icon-edit"></i></a>
    <button ng-click="delete(person)"><i class="icon-minus-sign"></i></button>
  </td>
</tr>

相关控制器方法:

$scope.delete = function (person) {
  API.DeletePerson({ id: person.id }, function (success) {
    // I need some code here to pull the person from my scope.
  });
};

我试了$scope.persons.pull(person)$scope.persons.remove(person).

虽然数据库已成功删除,但我不能将此项目从作用域中拉出,并且我不想对服务器进行方法调用,以获取客户端已有的数据,我只想将此人从作用域中删除.

有什么 idea 吗?

推荐答案

您的问题实际上不是Angular 问题,而是Array方法问题.从数组中删除特定项的正确方法是使用Array.splice.此外,在使用ng-Repeat时,您可以访问特殊的$index属性,它是您传入的数组的当前索引.

解决方案其实非常简单:

View:

<a ng-click="delete($index)">Delete</a>

Controller:

$scope.delete = function ( idx ) {
  var person_to_delete = $scope.persons[idx];

  API.DeletePerson({ id: person_to_delete.id }, function (success) {
    $scope.persons.splice(idx, 1);
  });
};

Html相关问答推荐

在inline-box中设置线高会使CSS中的高度变得奇怪

传单自定义标记(divIcon)html/css不适用

如何使div按钮链接到另一个网页

如何在angular 17.2中使用routerLink解决此错误

Tailwincss:自动设置网格高度

如何在css中将包含多行文本的多个p-tag放在一起(并排)?

为所有必填字段添加所需的占位符文本(Angular Material)

如何在一张表中逃脱边境坍塌--崩溃?

如何在所有屏幕大小下使带有背景图像的伪元素作为标题的衬底?

将表格背景图像置于行背景 colored颜色 之上

未在抖动中播放的HTML音频||文本正在工作其他标记正在播放,但音频未播放

如何将tmap按钮和图例更改为位于页脚后面?

标题在实时网站上闪烁

添加带有悬停动画的喜欢图标

HTML 重定向到当前服务器

并排对齐两个文本区域列

Github上部署需要花费几小时时间:等待github pages部署批准

如何将一个边框向下移动

防止HTML输入中出现负数但接受小数

Angular Material Hide Password 在输入时切换