Question

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

在我的控制器中，重复我的对象，给我一个类别标题，然后是该类别的孩子。例如，

{
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>
    }
}

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

Answer 1

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

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

然后您可以使用ng-if="!prod.remove"

Answer 2

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

＆＃13;

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);
        }
      }
    }
  });

＆＃13;

<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>

＆＃13;

Answer 3

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

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>

以角度方式拼接数组中的对象

3 个答案: