javascript - Dynamically Creating repeated textbox and textbox groups fails in AngularJS -
my code 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 looks okay me adding , removing elements functionality not working
you have $scope.palletelement array of 2 positions each 1 has , object children property, in $scope.newprditem function accessing children element of array (which not exist) instead of accessing children property of object in first or sec array position, 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 alter $scope.newprditem function pass prdelement new children element added.
another problem in remove function, in case you're making similar mistake, in case applying splice in object instead of array, use:
prdelement.children.splice($index, 1)
instead of:
prdelement.splice($index, 1)
all in code looks like:
jsfiddle
jsfunction 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 helps,
javascript angularjs
No comments:
Post a Comment