以角度拼接数组中的对象答案

【问题标题】：Splicing an object from array in angular以角度拼接数组中的对象
【发布时间】：2017-03-04 23:08:34
【问题描述】：

我正在努力弄清楚如何从指令中从我的数组中删除单个对象...

在我的控制器中，我对我的对象进行 ng-repeat，以给我一个类别标题，然后是该类别的子项。例如，

{
deptName: 'Fruit',
deptProducts: [{
    name: 'Mangos',
    price: '50p'
    },{
    name: 'Apples',
    price: '30p',
    },{
    name: 'Grapes',
    price: '20p',
    },{
    name: 'Bananas',
    price: '10p',
    }]
}

我的 ng-repeat 包含组名和每个项目的指令。

<div ng-repeat="item in shopping">
    <span ng-bind="item.deptName"></span>
    <product ng-repeat="prod in item.deptProducts />
</div>

在我的指令的模板函数中，我有一个带有 ng-click 的按钮，我想删除对象中的一项，所以

function product() {
    return {
    scope: true,
    template: '<span ng-bind="prod.price"></span><button ng-click="removeItem()"></button>
    }
}

我不确定如何最好地调用函数来拼接节点以便更新模型。任何帮助表示赞赏！

【问题讨论】：

标签： angularjs

【解决方案1】：

您必须将数组传递给指令，希望这段代码可以帮助您。

angular.module('test', [])
  .controller('test', function ($scope) {
    $scope.item = {
      deptName: 'Fruit',
      deptProducts: [{
        name: 'Mangos',
        price: '50p'
        },{
        name: 'Apples',
        price: '30p',
        },{
        name: 'Grapes',
        price: '20p',
        },{
        name: 'Bananas',
        price: '10p',
        }]
    };
  })
  .directive('product', function () {
    return {
      restrict: 'AE',
      scope: {
        index: '@',
        products: '=',
      },
      template: '<span ng-bind="products[index].price"></span><button ng-click="products.splice(index, 1)">Remove</button>',
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="test">
  <div>
      <div ng-bind="item.deptName"></div>
      <product ng-repeat="prod in item.deptProducts" index="{{$index}}" products="item.deptProducts"/>
  </div>
</div>

【讨论】：

谢谢你。我喜欢这种方法，它很容易遵循。我调用了一个函数来进行拼接，但除此之外，这个答案正是我想要的。再次感谢！

【解决方案2】：

您需要访问指令内的deptProducts 数组才能实际操作它。设置一个允许产品显示与否的属性会更简单：

return {
  scope: {product: "="},
  template: '<span>{{prod.price}}</span><button ng-click="prod.remove= false"></button>
}

那么你可以使用ng-if="!prod.remove"

【讨论】：

【解决方案3】：

您有几个选择。一种是将产品集合传递给指令并在指令内部进行删除。另一种是在控制器上创建一个删除产品的函数，然后将该函数传递给指令并从指令中调用它。后者的问题是您必须将足够的信息传递回控制器，以便它确定您实际要删除哪个集合中的哪个项目。这是一个展示这两种方法的示例，尽管我只展示了如何调用控制器上的方法并将参数传递给它，因为其余部分并不简单。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.shopping = [{
      deptName: 'Fruit',
      deptProducts: [{
        name: 'Mangos',
        price: '50p'
      }, {
        name: 'Apples',
        price: '30p',
      }, {
        name: 'Grapes',
        price: '20p',
      }, {
        name: 'Bananas',
        price: '10p',
      }]
    }];
    $scope.remove = function(prod) {
      console.log('remove in ctrl', prod);
    };
  })
  .directive('product', function() {
    return {
      scope: {
        products: '=',
        index: '=',
        removeFunction: '&'
      },
      template: '<div><span ng-bind="products[index].name"></span><span ng-bind="products[index].price"></span><button ng-click="removeItem()">Remove</button><span></div>',
      link: function(scope, elem, attr) {
        scope.removeItem = function() {
          scope.removeFunction({
            prod: scope.products[scope.index]
          });
          scope.products.splice(scope.index, 1);
        }
      }
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in shopping">
    <span ng-bind="item.deptName"></span>
    <product ng-repeat="prod in item.deptProducts" products="item.deptProducts" index="$index" remove-function="remove(prod)" />
  </div>
</div>

【讨论】：