在AngularJS中爲動態嵌套列表添加新輸入

在我的頁面上，我有一個音樂家（玩家）的動態列表，而玩家可以被移除並添加到列表中。每個玩家應該有多個樂器，這也是一個動態列表，而樂器可以添加或從玩家的樂器列表中刪除。所以我們正在討論兩個嵌套的動態列表。在AngularJS中爲動態嵌套列表添加新輸入

下面是代碼和它下面的問題描述。

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被添加到所有不同的球員名單這是錯誤的：每個玩家的儀器清單應該有自己的新儀器。

我應該如何改變它以獲得正確的設計？謝謝！

來源

2015-07-11 jazzblue

你在哪裏做：

$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

我創建了一個fiddle這裏你可以查看一些可能修改你的代碼。它只使用一個控制器並修復重複的對象問題。

來源

2015-07-11 03:32:04 Mindastic

謝謝，但它似乎並沒有工作。與原始代碼一樣，任何作爲玩家1的新樂器輸入（在瀏覽器中）的內容都會自動複製到所有其他玩家，這意味着我複製了對象，但是一個副本會發送給所有玩家。 – jazzblue

嗯現在我再次看到你的代碼。什麼是'$ scope.player'？因爲我看到'$ scope.players'而不是'$ scope.player'。檢查我的更新的答案，看看它是否工作。 – Mindastic

我認爲你確實發現了一個$ scope.player的bug，我給你一點意見，但是，你建議的解決方案仍然不適合我。我認爲，問題在於新樂器的相同副本被推送給不同的玩家。然而，我需要爲每個玩家單獨複製一份或類似的東西。你有沒有試過你的建議？謝謝。 – jazzblue

<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); 
}

來源

2015-07-11 03:43:27

謝謝，但這仍然無法正常工作：在頁面上，當您在播放器1的文本框中鍵入「新樂器」的值時，它會在您輸入時自動複製到所有其他播放器的「新樂器」中。我需要爲不同的玩家提供不同的模型。有什麼辦法可以實現它嗎？謝謝。 – jazzblue

你只需要在你的ng-model newInstrument [$ index] .instrument和newPlayer [$ index] .level中的東西。它會爲每個玩家創建單獨的模型。 –

其實我找到了一種方法：我需要一個單獨的NewInstrument控制器，然後它會創建「單獨的實例」。您使用ng-model的建議非常有價值。謝謝。 – jazzblue

在AngularJS中爲動態嵌套列表添加新輸入

回答

相關問題