使用angularjs从HTML和模型上的多个级别上删除项目

Question

I want to be able to remove the nodes from any level of my array that I have as a model, but I cannot do that, except for the first level in the array.

I put together an example. I am new to angular, but I have searched for a solution for this particular problem and can't seem to find one.

HTML

<ul ng-app="myApp" ng-controller="Ctrl">
    <li ng-repeat="item in myCards.majorBlocks">        
        <h2>Block: {{item.name}}, Order: {{item.order}} <a href="#" ng-click="whatFnc(whatArg)">Remove</a></h2>


        <ul ng-if="item.name == 'brands'">
            <li ng-repeat="brandBlock in item.brand_blocks">
                <h3>Brand: {{brandBlock.name}} <a href="#" ng-click="whatFnc(whatArg)">Remove</a></h3>
                <ul>
                    <li ng-repeat="product in brandBlock.products">
                        <h4>Product: {{product.title}} <a href="#" ng-click="whatFnc(whatArg)">Remove</a></h4>
                    </li>
                </ul>
            </li>
        </ul>

    </li>
</ul>

JS

angular.module('myApp', [])
    .controller('Ctrl', function($scope) {
        $scope.myCards =  {
                tagline: 'Tagline',
                url: 'url',
                title: 'Please help',
                majorBlocks: [
                    {
                        "name": "cover",
                        "coverUrl": "http://www.url.com/cover/",
                        "coverImage": "http://www.url.com/cover/",
                        "order": '1'
                    },
                    {
                        "name": 'text',
                        "text": "Here's what's just arrived at LandmarkShops. Take a pick from these smart cameras by Samsung and Kodak to share your precious memories. Pre-order the Xbox One with 5 great games for just AED 199. Also, check out our selection of toys, travel systems and Back To School gear from Babyshop, and a range of smart tees from Splash!",
                        "order": '2'
                    },
                    {
                        'name': 'brands',
                        'order': '3',
                        'brand_blocks': [
                            {
                                'name': 'adidas',
                                'order': '1',
                                'products': [
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Product title B',
                                        price: 'price',
                                        order: '1'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Product title A',
                                        price: 'price',
                                        order: '2'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'title',
                                        price: 'price',
                                        order: '3'
                                    }
                                ]
                            },
                            {
                                'name': 'nike',
                                'order': '2',
                                'products': [
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Product title 1',
                                        price: 'price',
                                        order: '1'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Product title 2',
                                        price: 'price',
                                        order: '2'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Product title 3',
                                        price: 'price',
                                        order: '3'
                                    }
                                ]
                            },
                            {
                                'name': 'quicksilver',
                                'order': '3',
                                'products': [
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'dddd',
                                        title: 'Product title 6',
                                        order: '1'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Product title 7',
                                        price: 'price',
                                        order: '2'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Product title 8',
                                        price: 'price',
                                        order: '3'
                                    }
                                ]
                            },
                            {
                                'name': 'vans',
                                'order': '4',
                                'products': [
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'Lorem',
                                        price: 'price',
                                        order: '1'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'titleLorem dasdas',
                                        price: 'price',
                                        order: '2'
                                    },
                                    {
                                        url: 'url',
                                        thumb: 'thumb',
                                        title: 'dasdsda dasda',
                                        price: 'price',
                                        order: '3'
                                    }
                                ]
                            }
                        ]
                    }

                ]//hhe

        };
    });

Fiddle http://jsfiddle.net/1pmucunL/

Answer 1

You need to define whtFunc and whtargs as follows:-

$scope.whatFnc=function(item,parent){
    parent.splice(parent.indexOf(item), 1);
};

And HTML

<ul ng-app="myApp" ng-controller="Ctrl">
    <li ng-repeat="item in myCards.majorBlocks">        
        <h2>Block: {{item.name}}, Order: {{item.order}} <a href="#" ng-click="whatFnc(item,myCards.majorBlocks)">Remove</a></h2>


        <ul ng-if="item.name == 'brands'">
            <li ng-repeat="brandBlock in item.brand_blocks">
                <h3>Brand: {{brandBlock.name}} <a href="#" ng-click="whatFnc(brandBlock, item.brand_blocks)">Remove</a></h3>
                <ul>
                    <li ng-repeat="product in brandBlock.products">
                        <h4>Product: {{product.title}} <a href="#" ng-click="whatFnc(product,brandBlock.products)">Remove</a></h4>
                    </li>
                </ul>
            </li>
        </ul>

    </li>
</ul>

Jsfiddle: http://jsfiddle.net/1pmucunL/1/