Question

下面给出了相应的html代码。

<div class="row" ng-repeat="myCart in cart">
           <div class="col-lg-4 col-md-4">
               <div class="row">
                   <div class="col-lg-4 col-md-4">
                        <a href="#"><img src="{{myCart.src}}" class="img-responsive img-thumbnail" alt="Product 2" /></a>
                   </div>
                   <div class="col-lg-8 col-md-8">
                       <ul style="list-style-type: none;">
                           <li><a href="#">{{myCart.productName}}&nbsp;<span class="glyphicon glyphicon-gift"></span></a></li>
                           <li>{{myCart.manufacturer}}</li>
                           <li>{{myCart.specification}} | Qty {{myCart.quatntity}}</li>
                       </ul>
                       <ul style="list-style-type: none;margin-top:30px;">
                           <li><span class="glyphicon glyphicon-heart"></span>&nbsp;SAVE&nbsp;|&nbsp;<a href="#" ng-click="removeItem(myCart.id)"><span class="glyphicon glyphicon-trash"></span>&nbsp;REMOVE</a></li>
                       </ul>
                   </div>
               </div>  
           </div>
           <div class="col-lg-4 col-md-4">
               {{myCart.delivery}}
           </div>
           <div class="col-lg-4 col-md-4">
               <i class="fa fa-inr"></i>&nbsp;{{myCart.toalAmount}}
           </div>
       </div>

模块代码如下：

var myModule = angular.module("myModule", []);  
myModule.controller("myController", ["$scope", function ($scope) 

{

$scope.cart = [{
    id: 1,
    src:"app/img/p"+1+".png",
    productName: "CAMERA",
    manufacturer: "Canon Black Camera",
    specification: "5 MeagaPixel",
    quatntity: 1,
    delivery: "12/03/2016",
    toalAmount:699
},

{
    id: 2,
    src: "app/img/p" + 2 + ".png",
    productName: "DINNER SET",
    manufacturer: "Lao Pala",
    specification: "full family set",
    quatntity: 1,
    delivery: "16/03/2016",
    toalAmount: 1799
},
{
    id: 3,
    src: "app/img/p"+3 +".png",
    productName: "LADIES BAG",
    manufacturer: "Crocodile Bag",
    specification: "5 mm leather",
    quatntity: 1,
    delivery: "29/03/2016",
    toalAmount: 899
}
];

$scope.removeItem = function (id) {
    $scope.cart.splice(id-1, 1);
}
}]);

问题如下：

1）当我从购物车项目列表的底部删除该项目时，代码工作正常，但是当我开始从中间或顶部删除项目时，最后剩下的项目不会被删除。要删除我正在使用splice()方法。

请告诉我我失踪的地方。任何文档链接对我都有帮助。提前致谢

以下是截屏。

Answer 1

试试这个：

在您的HTML中：

    <a href="#" ng-click="removeItem($index)">
       <span class="glyphicon glyphicon-trash"></span>
       &nbsp;REMOVE
   </a>

在控制器中：

$scope.removeItem = function (index) {
    $scope.cart.splice(index, 1);
}

Answer 2

使用$ index指定要删除的元素的索引，它是ng-repeat指令的内置属性

<a href="#" ng-click="removeItem($index)">

Answer 3

希望，this Punker will help you。您需要使用$index进行检查。

<li><span class="glyphicon glyphicon-heart"></span>&nbsp;SAVE&nbsp;|&nbsp;<a href="#" ng-click="removeItem($index)"><span class="glyphicon glyphicon-trash"></span>&nbsp;REMOVE</a></li>

Answer 4

如果您删除ID为2的项目，则删除项目购物车[1]（您的＆＃34; id-1＆＃34;）。因此，在您的购物车中，您的购物车ID为3和1.如果您想要移除ID为3的购物车，则需要移除购物车[2]，但您只剩下2个购物车。我认为你不能使用id，但是：

    ng-repeat="myCart in cart track by $index"

并在＆＃34; removeItem＆＃34;中使用索引功能

Answer 5

您应该使用数组的索引而不是数据的id。 id数据不代表它们在数组中出现的顺序，特别是如果您打算删除数组中的某些项目。

您可以改为使用$index：

<a href="#" ng-click="removeItem($index)">

然后：

$scope.removeItem = function (index) {
    $scope.cart.splice(index, 1);
}

Answer 6

简短回答：您的数组长度与ID

不同步

详述：问题是当你从TOP中删除一个元素时，你的数组会被调整为一个较小的元素，但你内部的对象不会改变这些ID。

所以你最终得到一个大小为2的数组，但是你的最后一个元素是id 3，数组是基于0的，所以要删除你需要的最后一个元素splice（1,1）而不是splice（2,1 ）。

AngularJS购物车代码删除无法正常工作的商品

6 个答案: