skip to Main Content

So I have little dilemma here. I have a nested json object that is inside ng-repeat and is sortable using AngularJS UI Sortable (based on JQuery UI Sortable):

$scope.rootItem = {
        id: '1',
        type: 'course',
        title: 'Adobe Photoshop CC for beginners',
        items: [{
            id: '2',
            type: 'label',
            title:'label',
            items:[{
                id: '3',
                type: 'module',
                title:'Module title',
                items: [{
                    id: '4',
                    type: 'topic',
                    title:'Topic title',
                    items: [{
                        id: '5',
                        type: 'content',
                        title:'Content title'
                    }, {
                        id: '6',
                        type: 'content',
                        title:'Content title'
                    }]
                }]
            },{
                id: '7',
                type: 'resources',
                title:'Resources'
            },{
                id: '8',
                type: 'module',
                title:'Module title',
                items: [{
                    id: '9',
                    type: 'topic',
                    title:'Topic',
                    items: [{
                        id: '10',
                        type: 'question',
                        title:'Question title'
                    }]
                }, {
                    id: '11',
                    type: 'topic',
                    title:'Topic title',
                    items: [{
                        id: '12',
                        type: 'content',
                        title:'Content title'
                    }]
                }]
            }]
        },{
            id: '14',
            type: 'assessmentLabel',
            title: 'Assessment Label',
            items: [{
                id: '15',
                type: 'assessment',
                title: 'Assessment Title',
                items: [{
                    id: '16',
                    type: 'courseAssessment',
                    title: 'Course Question Group',
                    items: []
                }]
            }]
        }]
    };

What I should be able to do is remove any of the items within this object, and if it has any children they need to be remove too.

So what I would generally think is passing either $index and use splice to remove it (if it was an array).

But for objects doesnt seem to work this way, I read online that delete should be used instead…

On my button I try to pass the object itself as in:

data-ng-click="removeItem(ngModelItem)"

and in my controller do something like this:

// Remove Item from the list
    $scope.removeItem = function(item) {

    };

Any suggestions?

2

Answers


  1. For removing json elements from a json object you use the delete operator. But in your case, I assume you want to remove a json object from a json array, so you should really use splice() instead.

    You should receive both the list and the index in your removeItem() function so you can remove the indexed element and angularjs will update your view.

    Login or Signup to reply.
  2. Use ngModelItem

    <li ng-repeat="innerItem in ngModelItem.items">
        <a href="#" ng-click="deleteItem(ngModelItem.items, $index)">Delete me</a>
    

    in your controller,

    $scope.deleteItem = function(collection, index){
        collection.splice(index,1);
    };
    

    Demo

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search