Добавить новый вход в динамический вложенный список в 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 добавляется ко всем различным спискам игроков, которые не так: у каждого игрока список инструментов должен иметь свой собственный newInstrument.

Как мне изменить его, чтобы получить правильный дизайн? Спасибо!

источник

2015-07-11 jazzblue

Где вы:

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

Попробуйте сделать:

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

Update:

В вашем 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, я даю вам точку для вашего комментария, однако решение, которое вы предлагаете, по-прежнему не работает для меня. Я думаю, проблема в том, что одна и та же копия newInstrument переносится на разных игроков. Мне нужен, однако, отдельный экземпляр для каждого игрока или что-то в этом роде. Вы пробовали свое предложение? Благодарю. – 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

ответ

Смежные вопросы