角拼接隱藏錯誤

Question

我有以下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與中間對象匹配，因此在刷新頁面時，我具有以下（正確）視圖：

誰能告訴我這到底是怎么回事？

Answer 1

解決方案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);
}

Answer 2

校驗：

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更改第一個參數，當前稱為“模塊”，但通過索引）

Answer 3

如果我沒記錯的話，module是一個對象，請嘗試將其索引作為splice函數的參數：

   $scope.academyModules.splice($scope.academyModules.indexOf(module),1);

Answer 4

在這段代碼中$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);
}

Answer 5

我認為這是因為splice（）的工作方式。 第一個參數是拼接開始的索引，但是您要“拼接”的區域將不包括位於數組中該位置的元素，因為索引從零開始。 以下代碼將不會拼接數組中的第一項。 我假設您是從底部到頂部填充列表，這就是為什么刪除頂部項目的原因（因為順序地它​​在您要刪除的項目之后）。

var list = [1,2,3,4];

list.splice（1，1）;

的console.log（列表）;

http://codepen.io/nhmaggiej/pen/LEqKvm