[英]Angular splice hiding error
我有以下ng-repeat
:
<li class="list-group-item module" draggable="true" style="padding-top: 15px; padding-bottom: 0px;" ng-repeat="module in academyModules">
<span class="pull-left media-xs draggable" style="margin-top: 5px;"><i
class="fa fa-sort text-muted fa m-r-sm"></i></span>
<div class="clear">
<div class="col-md-4 col-xs-10">
<button class="btn btn-s-xs btn-rounded m-r-lg" ng-class="module.module_type.color"
style="padding: 2px 10px; min-width: 90px;">{{module.module_type.name}}
</button>
<span class="text text-muted">Modul</span>
</div>
<span class="pull-right">
<a class="btn btn-md pull-right no-padder" title="" ng-click="deleteModule(module);"><i
class="fa fa-times text-danger text"></i></a>
</span>
<div class="col-lg-5 col-xs-11">
<div class="input-group m-b">
<div class="input-group-btn">
<button class="btn btn-info" onclick="changeModule(module)" data-toggle="modal"
data-target="#modal_select_module" style="font-size: 10px;"
type="button"><i class="fa fa-plus"></i> Skift modul
</button>
</div>
<!-- /btn-group -->
<input type="text" class="form-control input-sm" value="{{module.module.name}}" style="height: 27px"
disabled="">
</div>
</div>
</div>
</li>
在这我有一个删除功能:
ng-click="deleteModule(module);"
调用以下函数:
$scope.deleteModule = function(module)
{
$http({
url: api.getUrl('deleteAcademyModule',$scope.current_id),
method: "POST",
data: {module_id:module.module_id, academy_id: $scope.current_id}
}).success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {
});
$scope.academyModules.splice(module,1);
}
问题是,当我按Delete键时,使用$http
从数据库中删除了正确的模块,但是从列表中删除/隐藏了错误的项目:
现在说我删除中间项目(红色又名测试)
该列表将如下所示:
如您所见,它从列表中删除了上面的项目,但是发送到数据库的ID与中间对象匹配,因此在刷新页面时,我具有以下(正确)视图:
谁能告诉我这到底是怎么回事?
解决方案1:
如果要在ng-repeat
中将当前元素的索引,则需要使用变量$index
。
因此,您可以替换:
ng-click="deleteModule(module);"
通过
ng-click="deleteModule($index);"
您的splice
方法将完成正确的工作。
解决方案2:
您可以在控制器中更改方法以检索元素索引:
var pos = $scope.academyModules.indexOf(module);
if (-1 !== pos) {
$scope.academyModules.splice(pos, 1);
}
校验:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
array.splice(start, deleteCount[, item1[, item2[, ...]]])
您应该尝试通过索引指向模块:
array.splice(1,1); //从第一个位置删除一个元素
(为您的var更改第一个参数,当前称为“模块”,但通过索引)
如果我没记错的话,module是一个对象,请尝试将其索引作为splice函数的参数:
$scope.academyModules.splice($scope.academyModules.indexOf(module),1);
在这段代码中$scope.academyModules.splice(module,1);
您的模块不代表整数。
也许您可以改为:
ng-click="deleteModule(module, $index);"
然后在您的控制器中:
$scope.deleteModule = function(module, pos)
{
$http({
url: api.getUrl('deleteAcademyModule',$scope.current_id),
method: "POST",
data: {module_id:module.module_id, academy_id: $scope.current_id}
}).success(function (data, status, headers, config) {
}).error(function (data, status, headers, config) {
});
$scope.academyModules.splice(pos,1);
}
我认为这是因为splice()的工作方式。 第一个参数是拼接开始的索引,但是您要“拼接”的区域将不包括位于数组中该位置的元素,因为索引从零开始。 以下代码将不会拼接数组中的第一项。 我假设您是从底部到顶部填充列表,这就是为什么删除顶部项目的原因(因为顺序地它在您要删除的项目之后)。
var list = [1,2,3,4];
list.splice(1,1);
的console.log(列表);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.