Привет я хочу удалить json в angularjs

В первый раз я использую только 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);
            }

С директивой я не могу удалить элемент. Пожалуйста, помогите мне, почему я не могу удалить данные.

0
GerryofTrivia 28 Май 2017 в 21:45

2 ответа

Лучший ответ

Передайте обратный вызов вашей директиве от контроллера, который будет запускаться при удалении элемента из массива.

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

Затем, когда вы вызываете директиву:

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

И внутри вашей директивы:

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

И измените функцию удаления в контроллере, чтобы использовать идентификатор для удаления элементов из массива, потому что он безопаснее, чем $index:

$scope.remove= function(id){
  $scope.artworksItems.splice($scope.artworksItems.findIndex(el => el.id === id), 1);
}
1
quirimmo 28 Май 2017 в 19:28

Вы можете передать индекс в качестве атрибута.

<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);
0
Kevin Lee Drum 28 Май 2017 в 18:55