Javascript 使用angular从ng重复、简单的购物车实现中添加和删除项目

我正在尝试实现一个包含显示为标题和图像的项目的数组，当用户单击标题时，该项目应添加到div中。但是，我无法使其像单击AddMe时那样工作，只添加了一个空白项目，没有图像和标题。 我得到了删除功能，但没有添加功能

以下是我得到的： “添加我”按钮和项目列表

    <li ng-repeat="item in items.data">
        <a href="#">{{item.title}}</a> <img ng-src="{{ item.image }}" /><a ng-click="deleteItem($index)" class="delete-item">x</a>
        <button ng-click="addItem()">Add Me</button>
    </li>

以及添加和删除功能

function ItemsController($scope, items) {
$scope.items = items;

$scope.deleteItem = function (index) {
    items.data.splice(index, 1);
}
$scope.addItem = function () {
    items.data.push({
        title: $scope.items.title
    });
 }
}

---

您需要传递迭代下的项

<button ng-click="addItem(item)">Add Me</button>

最好不要使用$index，它在与筛选器（例如：orderBy筛选器）一起使用时可能会导致问题，而只需传递要删除的项，然后：

   $scope.deleteItem = function(item) {
     items.data.splice(items.indexOf(item), 1);
   }

你也有一个无效的html，李必须是ul或ol的孩子

示例实现：

 function($scope, items) {
  $scope.items = items;
  $scope.cart = [];

  $scope.deleteItem = function(item) {
    var cart = $scope.cart;
    //Get matched item from the cart
    var match = getMatchedCartItem(item);
    //if more than one match exists just reduce the count
    if (match.count > 1) {
      match.count -= 1;
      return;
    }
    //Remove the item if current count is 1
    cart.splice(cart.indexOf(item), 1);
  }

  $scope.addItem = function(item) {
    //Get matched item from the cart
    var match = getMatchedCartItem(item), itemToAdd ;
     //if item exists just increase the count
    if (match) {
      match.count += 1;
      return;
    }

    //Push the new item to the cart
    itemToAdd = angular.copy(item);
    itemToAdd.count = 1;

    $scope.cart.push(itemToAdd);
  }

  function getMatchedCartItem(item) {
    /*array.find - Find the shim for it in the demo*/
    return $scope.cart.find(function(itm) {
      return itm.id === item.id
    });

  }

演示

角度.module'app'，[].controller'ctrl'，function$scope，items{ $scope.items=项目； $scope.cart=[]； $scope.deleteItem=functionitem{ var cart=$scope.cart； var match=getMatchedCartItemItemItem； 如果match.count>1{ match.count-=1； 回来 } cart.patchecart.indexOfitem，1； } $scope.addItem=functionitem{ var match=getMatchedCartItemItemItem； 如果匹配{ match.count+=1； 回来 } var itemToAdd=angular.copyitem； itemToAdd.count=1； $scope.cart.pushitemToAdd； } 函数getMatchedCartItemItemItem{ 返回$scope.cart.findfunctionitm{ 返回itm.id==item.id }; } }.工厂项目、功能{ 变量项={}； items.data=[{ id:1， 标题：项目1， 图片：img/item01.jpg }, { id:2， 标题：项目2， 图片：img/item02.jpg }, { id:3， 标题：项目3， 图片：img/item03.jpg }, { id:4， 标题：项目4， 图片：img/item04.jpg }]; 退货项目； }; 如果Array.prototype.find{ Array.prototype.find=functionpredicate{ 如果这个==null{ 抛出新的TypeError'Array.prototype.find调用null或undefined'； } 如果谓词类型！=“函数”{ 抛出新类型错误“谓词必须是函数”； } var list=Objectthis； var length=list.length>>>0； var thisArg=参数[1]； var值； 对于变量i=0；i X

---

什么是$scope.items.title？为什么有两个添加按钮？我尝试使用{{item.title}}来显示列表中的标题，但没有成功。是的，它可以工作！我想我理解这些变化，我觉得我接近一个解决方案：非常感谢你的帮助@jodor我已经添加了解释，请参阅我的答案更新。另外，我正在使用array.find。@PSL您能添加代码以根据数量计算物品的价格吗？还有购物车的总数。谢谢：

   $scope.deleteItem = function(item) {
     items.data.splice(items.indexOf(item), 1);
   }

 function($scope, items) {
  $scope.items = items;
  $scope.cart = [];

  $scope.deleteItem = function(item) {
    var cart = $scope.cart;
    //Get matched item from the cart
    var match = getMatchedCartItem(item);
    //if more than one match exists just reduce the count
    if (match.count > 1) {
      match.count -= 1;
      return;
    }
    //Remove the item if current count is 1
    cart.splice(cart.indexOf(item), 1);
  }

  $scope.addItem = function(item) {
    //Get matched item from the cart
    var match = getMatchedCartItem(item), itemToAdd ;
     //if item exists just increase the count
    if (match) {
      match.count += 1;
      return;
    }

    //Push the new item to the cart
    itemToAdd = angular.copy(item);
    itemToAdd.count = 1;

    $scope.cart.push(itemToAdd);
  }

  function getMatchedCartItem(item) {
    /*array.find - Find the shim for it in the demo*/
    return $scope.cart.find(function(itm) {
      return itm.id === item.id
    });

  }