将新输入添加到AngularJS中的动态嵌套列表

Question

在我的页面上，我有一个动态的音乐人（玩家）列表，而玩家可以被移除并添加到列表中。 每个玩家应该有多个乐器，这也是动态列表，而乐器可以添加到乐器的乐器列表中或从乐器列表中删除。 所以我们讨论的是两个嵌套的动态列表。

这是代码和它下面的问题描述。

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 as 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 as 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'}
]

这是我的问题：同样的newInstrument被添加到所有不同的玩家列表中是错误的：每个玩家的乐器列表应该有自己的newInstrument 。

我应该如何改变它以获得正确的设计？ 谢谢！

Answer 1

你在哪里：

$scope.addInstrument = function() {
        $scope.player.push(newInstrument);
    }

尝试做：

$scope.addInstrument = function() {
        $scope.player.push(angular.copy(newInstrument));
    }

更新：

在您的HTML中：

<button ng-click="addInstrument(player)">Add Instrument</button>

在你的JS中：

$scope.addInstrument = function(player) {
            player.push(angular.copy(newInstrument));
        }

UPDATE

我创建了一个小提琴，您可以检查对代码的一些可能的修改。 它只使用一个控制器并修复了重复的对象问题。

Answer 2

<button ng-click="addInstrument($index)">Add Instrument</button>
    Instrument: <input ng-model='newInstrument.instrument'>
    Level: <input ng-model='newPlayer.level'>

你的addInstrument函数应该是这样的

$scope.addInstrument = function(index) {
    $scope.players[index].push($scope.newInstrument);
}

将新输入添加到AngularJS中的动态嵌套列表

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-07-11 03:32:04

解决方案2
1 2015-07-11 03:43:27

将新输入添加到AngularJS中的动态嵌套列表

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-07-11 03:32:04

解决方案2 1 2015-07-11 03:43:27

解决方案1
2 已采纳 2015-07-11 03:32:04

解决方案2
1 2015-07-11 03:43:27