从html&使用angularjs在多个级别上建模

remove item from html & model on multiple levels with angularjs

本文关键字：建模 angularjs html amp 使用      更新时间：2023-09-26

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

我举了一个例子。我对棱角分明是个新手，但我一直在寻找这个特定问题的解决方案，但似乎找不到。

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/

您需要定义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>

Js文件：http://jsfiddle.net/1pmucunL/1/

相关文章：