如何在angularjs中从表格中删除单个字段

9 浏览
0 Comments

如何在angularjs中从表格中删除单个字段

我正在尝试编写一个函数，使我能够在点击按钮时删除一个项目，但是我觉得我对函数有些困惑 - 我要使用$digest吗？

HTML和app.js：

    
  
  • 
    {{bday.name}} | {{bday.date}}
    
    
      
      
      
      
      
      
      删除
    
    
  
    • 


$scope.remove = function(){
  $scope.newBirthday = $scope.$digest();
};

0

3 答案

0 Comments

在AngularJS中删除表格中的单个字段的方法：

如果你在一个ng-repeat中，你可以使用一行代码的选项：

`$index` 是AngularJS用来显示在`ng-repeat`内部数组的当前索引的变量。

0
0 Comments

在AngularJS中，如果要删除表格中的单个字段，需要从数组中删除该字段，并可以将字段传递给标记中的删除函数。然后在控制器中查找项目的索引并从数组中删除。

在控制器中：

$scope.remove = function(item) {

var index = $scope.bdays.indexOf(item);

$scope.bdays.splice(index, 1);

}

Angular会自动检测到bdays数组的更改，并更新。

解决方法：

可以使用

<a class="btn" ng-click="remove(item)">Delete</a>

标记中的ng-click指令将项目传递给删除函数，并在控制器中找到项目的索引并从数组中删除。

DEMO: http://plnkr.co/edit/ZdShIA?p=preview

如果使用服务器进行实时更新，可以使用使用$resource创建的服务来管理数组更新和服务器的同步更新。

在模板上直接使用$index可能会在模板过滤时产生错误。更安全的做法是使用ng-click='remove(bday)'而不是arr.splice(arr.indexOf(bday),1);

如果未找到.indexOf(item)，将返回-1，如果不进行检查，可能会导致删除数组末尾的项。

可以使用polyfill解决IE9以下的兼容问题：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 另外，最新版本的Angular不再支持IE9以下的版本。

在Array.prototype.splice()的文档中查找（index，1）的含义。

如果在所有项目中都有messages.html中的HTML，不想在所有控制器中更新这个小片段，可以考虑使用指令或服务来处理该功能。

如果要执行“撤消”操作，可以将项目推回到数组中，并使用此方法删除的信息。

0
0 Comments

问题的出现原因：

- 两个回答中的代码示例有一处错误，参数传递和控制器中的变量名不一致。

解决方法：

- 更正代码示例中的错误，确保参数传递和控制器中的变量名一致。

- 使用indexOf方法时，确保浏览器版本是IE9及以上。

- 如果在ng-repeat中使用了orderBy或filter，以上代码示例将无法正常工作。

- 如果在ng-repeat中使用了track by $index，可以使用以下代码示例。

- 如果使用了分页，$index在每个页面中不会更改，始终从零开始，因此以上代码示例在使用分页时不适用。

- 以上代码示例即使使用了track by $index也无法正常工作。

正确的答案：

Delete
$scope.remove=function($index){ 
  $scope.bdays.splice($index,1);     
}

以上是关于如何在AngularJS中从表格中删除单个字段的问题的原因和解决方法的整理。

0