Question

你好我想删除angularjs中的json

我第一次只使用ng-repeat directive

<div ng-repeat="artworkItem in artworksItems | filter: {category:'artworks'}| filter:query" class="">
    <p>{{artworkItem.name}}</p>
    <button ng-click="remove($index)">delete</button>
</div>

控制器

ItemFactory.get().then(function(data) {
      $scope.artworksItems = data;
});
$scope.remove= function(index){
        $scope.artworksItems.splice(index, 1);
}

它有效。然后我尝试用指令移动它。所以我的代码就像这样

<div ng-repeat="artworkItem in artworksItems | filter: {category:'artworks'}| filter:query" class="">
    <grid-artworks data="artworkItem"></grid-artworks>
</div>

directive.html

<div>
    <div class=" col-xs-6 col-sm-4 col-md-3 productThumbnail">
        <a href="#/Artworks/{{data.id}}" class="">
            <img ng-src="{{data.imgUrl}}" alt="{{data.name}}" class="img-responsive">
            </a>
            <div class="caption">
                <p class="title text-center">{{data.name}}</p>
                <p class="text-center">{{data.priceTotal}} {{data.curency}}</p>
                <button ng-click="remove($index)">d</button>            
            </div>

    </div>
</div>

directive.js

angular
    .module('app.directives.gridViewArtworks',[])
    .directive('gridArtworks',function()
    {
        return{
            restrict:'E',
            scope:{
                data: '='
            },
            transclude:true,
            replace:true,
            templateUrl:"templates/directives/gridViewArtworks.html",
            controller:function($scope){
                console.log($scope.data);
            }
        };
    }
);

控制器

ItemFactory.get().then(function(data) {
                $scope.artworksItems = data;
            });
            $scope.remove= function(index){
                $scope.artworksItems.splice(index, 1);
            }

使用指令我无法删除该项目。请帮助我，为什么我不能删除数据。

Answer 1

从控制器传递回调到你的指令，这将通过从数组中删除元素来触发。

scope:{
  data: '=',
  onRemove: '&'
},

然后当你调用指令时：

<grid-artworks data="artworkItem" on-remove="remove(id)"></grid-artworks>

在你的指令里面：

<button ng-click="onRemove({id: data.id})">d</button>

并在控制器中更改你的删除功能，以便使用id从数组中删除元素，因为它比$index更安全：

$scope.remove= function(id){
  $scope.artworksItems.splice($scope.artworksItems.findIndex(el => el.id === id), 1);
}

Answer 2

您可以将index作为属性传递。

<grid-artworks data="artworkItem" index="{{$index}}"></grid-artworks>

您需要将其添加到指令的范围内。

scope: {
  index: '@',
// ...

然后你可以使用它。

<button ng-click="remove(index)">d</button>

或者，您应该能够remove(data)：

var index = $scope.artworksItems.indexOf(data);
$scope.artworksItems.splice(index, 1);

从指令中删除json对象

2 个答案: