Question

我希望能够从我作为模型的数组的任何级别删除节点，但我不能这样做，除了数组中的第一级。

我把一个例子放在一起。我是棱角分明的新手，但我已经为这个特殊问题寻找解决办法，而且似乎无法找到它。

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

        };
    });

小提琴 http://jsfiddle.net/1pmucunL/

Answer 1

您需要按如下方式定义whtFunc和whtargs： -

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

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

从html＆amp;中移除项目具有angularjs的多个级别的模型

1 个答案: