Dynamically Creating repeated textbox and textbox groups fails in AngularJS

Question

MY code is like this

<body>
<div ng-app=''>
    <div ng-controller="questionCtrl">
        <div>
            <ul />
            <li ng-repeat="prdElement in palletElement">
                <input type="text" ng-model="prdElement.name" placeholder="Name" required />
                <ul>
                    <li ng-repeat="elemnt in prdElement.children">

                        <div>
                            <span>
                                <input type="text" ng-model="elemnt.name" placeholder="Name" required />
                            </span>
                            <span ng-hide="elemnt.length == 1">
                                <a href ng-click="prdElement.splice($index, 1)">remove</a>
                            </span>
                        </div>
                        <hr />
                    </li>
                    <li>
                        <a href ng-click="newPrdItem($event)">New Item</a>
                    </li>
                </ul>
            </li>


        </div>
        <div>
            <button ng-click="showitems($event)">Submit</button>
        </div>
        <div id="displayitems" style="visibility:hidden;">
            {{prdElement}}
        </div>
    </div>
</div>

    function questionCtrl($scope){
var counter=0;

$scope.palletElement = [{
    name: 'Pallet 1',
    children: [{
        name: '11',
    }, {
        name: '12',
    }]
}, {
    name: 'Pallet 2',
    children: [{
        name: '21'
    }, {
        name: '22'
    }]
}]



$scope.newPrdItem = function ($event) {
    counter++;
    $scope.prdElement.children.push({ id: counter, name: ''});
    $event.preventDefault();
}

$scope.showitems = function($event){
    $('#displayitems').css('visibility','none');
}

}

JSFiddle all looks okay to me but adding and removing elements functionality is not working

albciff · Accepted Answer · 2014-10-08 08:39:05Z

You have a $scope.palletElement which is an array of two positions each one has and object with children property, however in your $scope.newPrdItem function you are accessing the children element of the array (which not exist) instead of accessing the children property of the object in the first or second array position, so this works:

$scope.prdElement[0].children.push({ id: counter, name: ''}); $scope.prdElement[1].children.push({ id: counter, name: ''});

Instead of:

$scope.prdElement.children.push({ id: counter, name: ''});

A possible way to do this is to change $scope.newPrdItem function to pass the prdElement where new children element is added.

Another problem is in your remove function, in this case you're making a similar mistake, in this case you are applying splice in a object instead of an array, so use:

prdElement.children.splice($index, 1)

Instead of:

prdElement.splice($index, 1)

All together in your code looks like:

JSFiddle

js

function questionCtrl($scope){
    var counter=0;

    $scope.palletElement = [{
        name: 'Pallet 1',
        children: [{
            name: '11',
        }, {
            name: '12',
        }]
    }, {
        name: 'Pallet 2',
        children: [{
            name: '21'
        }, {
            name: '22'
        }]
    }]



    $scope.newPrdItem = function (prdElement, $event) {
        counter++;
        prdElement.children.push({ id: counter, name: '', inline: true });
        $event.preventDefault();
    }

    $scope.showitems = function($event){
        $('#displayitems').css('visibility','none');
    }
}

HTML

<body>
    <div ng-app=''>
        <div ng-controller="questionCtrl">
            <div>
                <ul />
                <li ng-repeat="prdElement in palletElement">
                    <input type="text" ng-model="prdElement.name" placeholder="Name" required />
                    <ul>
                        <li ng-repeat="elemnt in prdElement.children">

                            <div>
                                <span>
                                    <input type="text" ng-model="elemnt.name" placeholder="Name" required />
                                </span>
                                <span ng-hide="elemnt.length == 1">
                                    <a href ng-click="prdElement.children.splice($index, 1)">remove</a>
                                </span>
                            </div>
                            <hr />
                        </li>
                        <li>
                            <a href ng-click="newPrdItem(prdElement,$event)">New Item</a>
                        </li>
                    </ul>
                </li>
            </div>
            <div>
                <button ng-click="showitems($event)">Submit</button>
            </div>
            <div id="displayitems" style="visibility:hidden;">
                {{prdElement}}
            </div>
        </div>
    </div>
</body>

Hope this helps,

It's a similar problem in remove, now you're applying slice on a prdElement (which it's not an array) instead of applying to prdElement.children, so use: prdElement.children.splice($index, 1) instead of prdElement.splice($index,1). I will update my answer.

Collectives™ on Stack Overflow

Dynamically Creating repeated textbox and textbox groups fails in AngularJS

1 Answer 1

js

HTML

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

js

HTML

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related