Question

我有一个让用户编辑对象的控制器。这部分减少了对象的属性 - 我的模型的数量。当模型的数量达到0或更低时，理想情况下我想删除整个对象。

HTML

<div ng-app='basket'>
  <div ng-controller='BasketController as basket'>
    <div class='product' ng-repeat='product in cart.products'>{{ product.name }} Count: {{ product.quantity }} <a ng-click='product.quantity = product.quantity - 1'>Remove</a></div>
  </div>
</div>

JS

(function(){
  var app = angular.module('basket', []);
  var cart;

  app.controller('BasketController', function($scope, $http){

    $scope.getTimes=function(n){
      return new Array(n);
    };
    $scope.cart = {};
    $scope.cart.products = [{
      'name':'item 1',
      'quantity':3
    },{
      'name':'item 2',
      'quantity':3
    },{
      'name':'item 3',
      'quantity':3
    }];
  });

})();

现场演示

http://codepen.io/EightArmsHQ/pen/bNBmXm

所以，例如，在上面，如果你在第一个对象上反复点击'remove'，当你到0时，我想要一个像下面这样的数组：

    $scope.cart.products = [{
      'name':'item 2',
      'quantity':3
    },{
      'name':'item 3',
      'quantity':3
    }];

Answer 1

您可以编写一个删除方法来检查数量并从列表中删除该项目。

在您的控制器中： -

$scope.remove = function(product){
  var products = $scope.cart.products;
  product.quantity -= 1;

  if(!product.quantity){
    /*Splice the object from the array based on the index*/
    products.splice(products.indexOf(product), 1);
  }
}

点击即可将其称为：

<a ng-click='remove(product)'>Remove</a>

<强> Demo

Answer 2

将您的链接更改为：

<a ng-click='remove(product)'>Remove</a>

并将以下方法添加到控制器：

$scope.remove = remove;

function remove(product) {
    $scope.cart.products.splice($scope.cart.products.indexOf(product), 1);
}

属性0或以下时从数组中删除对象 - Angular

HTML

JS

现场演示

2 个答案: