javascript - Add new input to dynamic nested list in AngularJS -
on page have dynamic list of musicians (players) whereas player can removed , added list. each player shall have multiple instruments dynamic list, whereas instrument can added or removed player's instrument list. talking 2 nested dynamic lists.
here code , problem description under it.
jamorg.html:
<!doctype html> <html ng-app='jamorgapp'> <head> <link rel="stylesheet" type="text/css" href="c:\users\jazzblue\documents\bootstrap\bootstrap-3.3.2-dist\css\bootstrap.min.css" /> <title>jam organizer</title> </head> <body> <div ng-controller='jamorgcontroller jamorg'> <h1>jam</h1> <div ng-repeat='player in players'> <div> <h3 style="display: inline-block;">player {{$index}}</h3> <button ng-click="removeplayer($index)">remove</button> </div> <br/> <div ng-controller='jamorgplayercontroller jamorgplayer'> <div ng-repeat='instrument in player'> <span>instrument: {{instrument.instrument}},</span> <span>level: {{instrument.level}}</span> <button ng-click="remove($index)">remove</button> </div> <button ng-click="addinstrument()">add instrument</button> instrument: <input ng-model='newinstrument.instrument'> level: <input ng-model='newplayer.level'> </div> </div> </div> <script type="text/javascript" src="c:\users\jazzblue\documents\angularjs\angular.min.js"></script> <script type="text/javascript" src="jamorgapp.js"></script> </body> </html> jamorgapp.js
var app = angular.module('jamorgapp', []); app.controller('jamorgcontroller', ['$scope', function($scope){ $scope.players = players; $scope.removeplayer = function(index) { $scope.players.splice(index, 1); } }]); app.controller('jamorgplayercontroller', ['$scope', function($scope){ $scope.newinstrument = newinstrument; $scope.remove = function(index) { $scope.player.splice(index, 1); } $scope.addinstrument = function() { $scope.player.push(newinstrument); } }]); var players = [ [{instrument: 'guitar', level: 3}, {instrument: 'keyboard', level: 3}], [{instrument: 'bass', level: 4}], [{instrument: 'drums', level: 3}] ]; var newinstrument = [ {instrument: 'x', level: 'y'} ] here problem: same newinstrument being added different players lists wrong: each player's instrument list should have own newinstrument.
how should change right design? thanks!
where do:
$scope.addinstrument = function() { $scope.player.push(newinstrument); } try doing:
$scope.addinstrument = function() { $scope.player.push(angular.copy(newinstrument)); } update:
in html:
<button ng-click="addinstrument(player)">add instrument</button> in js:
$scope.addinstrument = function(player) { player.push(angular.copy(newinstrument)); } update
i created fiddle can check possible modifications code. uses 1 controller , fixes duplicated object issues.
Comments
Post a Comment